Как у вас есть два поля формы, использующие flex, которые занимают 33% строки?

Question

У меня есть форма , и у него есть три столбца .

Я использую flex для достижения динамической ширины для каждого элемента формы .

Я столкнулся с проблемой, когда У меня есть два поля формы, которые должны вписываться в 1/3 представления.

Это просто с одним полем формы, потому что вы добавляете: flex=33

С 2 полями вы не можете добавить flex=16.5. Для 16 он слишком широкий , а 15 слишком тонкий.

Какой метод получения двух полей формы занимает одну треть вида с помощью flex?

<div class="flex-100">
  <div class="flex-16">CONTENT</div>
  <div class="flex-16">CONTENT</div>
</div>

.flex-100 {
    flex-wrap: wrap;
    flex-direction: row;
    flex: 1 1 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.flex-16 {
    flex: 1 1 16%;
    max-width: 16%;
    max-height: 100%;
    box-sizing: border-box;
}

Я понял => Проблема в том, что flex на самом деле из CSS-фреймворка, и между десятичными числами нет классов flex, например 16.5%.

Я могу добавить пользовательский класс, который переопределяет flex-16 по следующим правилам:

flex: 1 1 16.5%;
max-width: 16.5%;

Answer 1

Когда вы устанавливаете flex=X, вы фактически устанавливаете атрибут flex-grow. Это определяет, как flexbox должен распределять любое доступное пространство. В вашем случае вы не хотите, чтобы они вообще росли, а должны быть точно 33%.

Для этого вы можете установить атрибут flex-basis. Это определяет, сколько места элемент должен занять до вычисления доступного пространства.

.container {
  height: 100px;
  background: red;
  display: flex;
}

.item1 {
  flex-basis: 33%;
  background: green;
}

.item2 {
  flex-basis: 33%;
  background: blue;
}

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
</div>