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

Question

Аналогичные, но не то же самое, что и Is clearfix deprecated?.

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

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

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

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

Answer 1

flex ред деталь будет масштабироваться с размером своих детей при условии, вы не установили конкретный height, так что вам не придется полагаться на float, или расширения clearfix. У меня есть pen, где я играю с 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 s по какой-либо причине, было бы неплохо их очистить.