如何根据多个条件调整此 Flexbox 布局？

Question

Current Layout

-------------------

 - Banner Row:Group

 -   Column 1: Label   Column 2: Input or Select  Column 3: Button or Link

 - EndGroup

 - Banner Row:Group

 -   Column 1: Label   Column 2: Input or Select  Column 3: Button or Link

 - EndGroup

 - Banner Row:Group

 -   Column 1: Label   Column 2: Input or Select  Column 3: Button or Link

 - EndGroup

• 我希望 Col1 （标签）右对齐，固定宽度相等

• 我希望 Col2 （输入或选择）大小相同，宽度固定

• 我希望 Col3（按钮或链接）左对齐

• 我想减小窗口宽度以将 col 组件包装到下一行，就像每列同时一样

body {

    display: flex;

    align-items: center;

    justify-content: center;

}

#box {

    flex-direction: column;

    justify-content: center;

    background-color: wheat;

    display: flex;

    border: 2px solid black;

    border-radius: 15px;

    border-color: black;

    padding: 20px 40px;

    margin: 10px 50px;

    box-shadow: 5px 10px 18px #888888;

}

#banner {

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #0099cc;

    border-radius: 500px;

    padding: 10px 50px 0 50px;

    margin: 0 auto 10px auto;

}

#banner-text {

    font-size: 14px;

    text-align: center;

    color: white;

    margin-bottom: 15px;

}

.right {

    font-size: 10px;

    text-align: right;

}

#box input[type="tel"], input[type="email"], select {

    font-size: 100%;

    margin: 0 10px;

    width: 200px;

}

a:link {

    font-size: 12px;

    font-weight: bold;

    text-decoration: none;

    align-self: center;

}

a:hover {

    text-decoration: underline;

    color: blue;

}

.button {

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    width: 150px;

    border: 2px solid #0099cc;

    background-color: #0099cc;

    color: #ffffff;

    border-radius: 15px;

    text-decoration: none;

    outline: none;

}

.button:hover {

    border: 2px solid white;

    color: #ffffff;

    padding: 5px 10px;

}

.button:disabled {

    border: 1px solid #999999;

    background-color: #cccccc;

    color: #666666;

}

textarea {

    font-size: 18px;

    height: 250px;

    width: 100%;

}

label {

    font-weight: bold;

}

Answer 1

这里有一个机会给你。根据你所说的你想要的，在我看来 css grid 是更好的选择。因此，我添加了 css 网格作为grid-template-columns: max-content max-content 1fr;列，它会在您创建新行时添加新行。我使用了包装 div ( .grid>div) display: contents，尽管所有主要浏览器尚未完全支持它，但解决方法就是删除包装 div，因为无论如何网格都会处理其余部分。body {&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;}#box {&nbsp; flex-direction: column;&nbsp; justify-content: center;&nbsp; background-color: wheat;&nbsp; display: flex;&nbsp; border: 2px solid black;&nbsp; border-radius: 15px;&nbsp; border-color: black;&nbsp; padding: 20px 40px;&nbsp; margin: 10px 50px;&nbsp; box-shadow: 5px 10px 18px #888888;}#banner {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; background-color: #0099cc;&nbsp; border-radius: 500px;&nbsp; padding: 10px 50px 0 50px;&nbsp; margin: 0 auto 10px auto;}#banner-text {&nbsp; font-size: 14px;&nbsp; text-align: center;&nbsp; color: white;&nbsp; margin-bottom: 15px;}.right {&nbsp; font-size: 10px;&nbsp; text-align: right;}#box input[type="tel"],input[type="email"],select {&nbsp; font-size: 100%;&nbsp; margin: 0 10px;&nbsp; /*width: 200px;*/}a:link {&nbsp; font-size: 12px;&nbsp; font-weight: bold;&nbsp; text-decoration: none;&nbsp; align-self: center;}a:hover {&nbsp; text-decoration: underline;&nbsp; color: blue;}.button {&nbsp; box-sizing: border-box;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; font-size: 16px;&nbsp; width: 150px;&nbsp; border: 2px solid #0099cc;&nbsp; background-color: #0099cc;&nbsp; color: #ffffff;&nbsp; border-radius: 15px;&nbsp; text-decoration: none;&nbsp; outline: none;}.button:hover {&nbsp; border: 2px solid white;&nbsp; color: #ffffff;&nbsp; padding: 5px 10px;}.button:disabled {&nbsp; border: 1px solid #999999;&nbsp; background-color: #cccccc;&nbsp; color: #666666;}textarea {&nbsp; font-size: 18px;&nbsp; height: 250px;&nbsp; width: 100%;}label {&nbsp; font-weight: bold;}.group {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; justify-content: center;&nbsp; align-items: center;}.grid {&nbsp; display: grid;&nbsp; grid-template-columns: max-content max-content 1fr;}.grid>div {&nbsp; display: contents;}.grid>div>:first-child {&nbsp; justify-self: flex-end;}@media only screen and (max-width: 600px) {&nbsp; .grid {&nbsp; &nbsp; grid-template-columns: 1fr;&nbsp; }&nbsp; .grid>div>:first-child {&nbsp; &nbsp; justify-self: flex-start;&nbsp; }}<div id="box">&nbsp; <div id="banner">&nbsp; &nbsp; <img src="https://www.google.com/logos/doodles/2020/thank-you-public-health-workers-and-to-researchers-in-the-scientific-community-6753651837108753-law.gif" alt="Banner" width="300" height="92" />&nbsp; &nbsp; <h3>Header Text</h3>&nbsp; </div>&nbsp; <div class="grid">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label for="input">Provider:</label>&nbsp; &nbsp; &nbsp; <select id="selected">&nbsp; &nbsp; &nbsp; &nbsp; <option value="opt1">Option #1</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; <a href="https://www.google.com">https://www.google.com</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label for="input">Patient Email:</label>&nbsp; &nbsp; &nbsp; <input type="email" id="email" name="email" placeholder="[e-mail]" />&nbsp; &nbsp; &nbsp; <input type="button" class="button" value="Send Email" />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <label for="input">Patient Mobile Phone:</label>&nbsp; &nbsp; &nbsp; <input type="tel" id="sms" name="sms" placeholder="[phone]" />&nbsp; &nbsp; &nbsp; <input type="button" class="button" value="Send SMS Text" />&nbsp; &nbsp; </div>&nbsp; </div></div>