如何根据多个条件调整此 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 {

  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;

}

.group {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

}

.grid {

  display: grid;

  grid-template-columns: max-content max-content 1fr;

}

.grid>div {

  display: contents;

}

.grid>div>:first-child {

  justify-self: flex-end;

}

@media only screen and (max-width: 600px) {

  .grid {

    grid-template-columns: 1fr;

  }

  .grid>div>:first-child {

    justify-self: flex-start;

  }

}

<div id="box">

  <div id="banner">

    <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" />

    <h3>Header Text</h3>

  </div>

  <div class="grid">

    <div>

      <label for="input">Provider:</label>

      <select id="selected">

        <option value="opt1">Option #1</option>

      </select>

      <a href="https://www.google.com">https://www.google.com</a>

    </div>

    <div>

      <label for="input">Patient Email:</label>

      <input type="email" id="email" name="email" placeholder="[e-mail]" />

      <input type="button" class="button" value="Send Email" />

    </div>

    <div>

      <label for="input">Patient Mobile Phone:</label>

      <input type="tel" id="sms" name="sms" placeholder="[phone]" />

      <input type="button" class="button" value="Send SMS Text" />

    </div>

  </div>

</div>