如何在 flex wrap 中尽可能多地占用空间答案

【问题标题】：How to take as much space as they can in flex wrap如何在 flex wrap 中尽可能多地占用空间
【发布时间】：2021-08-14 19:09:04
【问题描述】：

我创建了如下所示的自定义输入：

 <div className="custom-input-container">
            <label className="custom-input-label" htmlFor="input">Name</label>
            <input type="email" className="custom-input" id="input"  placeholder="Insert your name</input>
    </div>

.custom-input-container {
    min-width: 300px;

    .custom-input {
        width: 100%;
        height: 56px;
     }
}

我正在尝试创建一个包含 2 行的布局。第一行有两个输入应该占用整个可用空间，第二行输入应该占用可用空间的一半。

我尝试实现这一点，但使用 flex 和 flex-wrap 没有成功（仍然只占用 300px，flex-basis 也没有帮助）。

 <div className="billing-details-container flex flex-wrap">
                        <CustomInput />
                        <CustomInput />
                        <CustomInput />
                    </div>

  .billing-details-container {

        & > *:first-child {
            margin-bottom: 24px;
            margin-right: 16px;
        }

        & > *:last-child {
            margin-bottom: 50px;
        }
    }

知道如何实现吗？

【问题讨论】：

@isherwood 我刚刚创建了一些助手，flex 基本上是display: flex，flex-wrap 是flex-wrap:wrap
这似乎与您的问题高度相关。请把它放在那里。您还应该使用您的代码创建有效的 sn-ps。避免出于演示目的使用自定义组件。

标签： html css reactjs sass

【解决方案1】：

你的代码有很多问题。

您正试图通过添加 ClassName="" 为 html 提供类正确的语法其实是 class=""
您尚未关闭第二个输入。

这是我写的代码。我希望这就是你的意思，我删除了你的标签，因为无论如何你都在使用占位符。如果需要，您可以自己添加回来。

// ******************** 开始 HTML ******************** //

    <div class="custom-input-container">
        <div class='input-group'>
            <input type="email" name="input" placeholder="Insert your name">
            <input type="email" name="input" placeholder="Insert your name">
        </div>
        <input type="email" name="input" placeholder="Insert your name">
    </div>

// ******************** END HTML ******************** // // ******************** 开始 CSS ******************** //

    .custom-input-container {
        display: flex;
        flex-direction: column;
        min-width: 300px;
        background: orange;
    }
    .custom-input-container .input-group {
        display: flex;
        flex-direction: row;
    }
    .custom-input-container .input-group input {
        width: 50%;
        height: 56px;
    }
    .custom-input-container input {
        height: 56px;
    }

// ******************** END CSS ******************** //

【讨论】：

【解决方案2】：

我无法正确理解您想要实现的目标，但就我对问题的理解而言，我已经做了一些更改

<div class="custom-input-container">
            <label className="custom-input-label" htmlFor="input">Name</label>
            <input type="email" class="custom-input" id="input"  placeholder="Insert your name"</input>
    </div>

.custom-input-container {
    min-width: 300px;
  display: flex;
  align-items: center;
}
.custom-input {
    width: -webkit-fill-available;;
    height: 56px;
}

【讨论】：