Как настроить макет 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;
}
.group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

<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>
    <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="user@domain.com"
    />
    <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="(123) 456-7890"
    />
    <input type="button" class="button" value="Send SMS Text" />
  </div>
</div>

JSFiddle

Answer 1

Вот возможность для вас. Исходя из того, что вы говорили, вы хотели, мне показалось, что css сетка была лучшим вариантом.

Итак, я добавил css сетку с grid-template-columns: max-content max-content 1fr; в качестве столбцов, и он добавит новый строк по мере их создания.

Я заставил div-оболочки (.grid>div) использовать display: contents, хотя это еще не полностью поддерживается во всех основных браузерах, способ обойти это, используя просто удалите упаковочные элементы, поскольку сетка позаботится об остальных.

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="user@domain.com" />
      <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="(123) 456-7890" />
      <input type="button" class="button" value="Send SMS Text" />
    </div>
  </div>
</div>