时间戳

首页 > 解决方案 > 如何在 flex wrap 中尽可能多地占用空间

html - 如何在 flex wrap 中尽可能多地占用空间

问题描述

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

 <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;
        }
    }

知道如何实现吗？

标签： htmlcssreactjssass

解决方案

你的代码有很多问题。

  1. 您正在尝试通过添加 ClassName="" 为 html 提供类 正确的语法实际上是 class=""

  2. 您尚未关闭第二个输入。

<input type="email" className="custom-input" id="input" placeholder="插入你的名字

应该

<input type="email" class="custom-input" id="input" placeholder=">插入你的名字

您也不需要标签。你为什么给输入一个特定的ID？

  1. 您不能将标签 for="" 用于带有 id 的输入。您应该给它一个名称以在标签中使用它。

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

// ******************** 开始 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;
    }

// ******************** 结束 CSS ******************** //

推荐阅读