Могу ли я использовать flexbox для задания разметки элементов и, следовательно, отказаться от clearfix?

Question

Похоже, но не то же самое, что не рекомендуется использовать clearfix?,

У меня есть веб-приложение, предназначенное для современных браузеров. Flexbox используется везде для вертикальной центровки. Единственный настоящий взлом CSS/SASS - это clearfix:

@mixin clearfix {
    content: "";
    display: table;
    clear: both;
}

Есть ли какой-нибудь аспект flexbox, который я могу использовать, чтобы элемент содержал свои дочерние элементы, чтобы я мог прекратить использовать хаки clearfix?

Я понимаю, что это называется hasLayout браузерными механизмами рендеринга.

Answer 1

flexЭлемент ed будет масштабироваться с размером его дочерних элементов, при условии, что вы не установили конкретный heightтак что вам не нужно полагаться на floatили по расширению clearfix. У меня есть ручка, где я играю flex в данный момент.

Правила, которые я использую:

.parent {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
}
.child {
  margin-bottom: 1.5%;
}

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

По этим правилам display:flex говорит родителю отображать как flexbox. flex-flow это сокращение для flex-direction а также flex-wrap - в этом случае я говорю родителю, чтобы его дети сидели в ряду, и когда они достигнут конца доступной ширины, переходите к следующей строке. justify-content: space-between помогает с горизонтальным интервалом между детьми, устраняя необходимость отмены margin в конце ряда. align-content: space-between помогает добавить некоторый вертикальный интервал. Я обнаружил, что мне нужно добавить margin-bottom на детей, просто чтобы создать немного пустого пространства.

Быстрое предостережение, однако, в том, что если вам все еще нужно использовать floatПо какой-то причине было бы хорошо очистить их до сих пор.