Артефакт макета CSS3 — Flexbox

внешний интерфейс CSS flexbox
Артефакт макета CSS3 — Flexbox

display:flexЭто новая функция CSS3 и мощный артефакт макета.
В традиционных макетах обычно используется floatfloat,position, хотя можно хорошо изложить, но так как контактflexПосле этого это освобождение для макета интерфейса.

flex兼容性
На фото вышеflexПроблемы совместимости в различных браузерах и устройствах можно увидеть в дополнение кIEЭта функция в основном поддерживается вне браузера. Но не беспокойтесь об этом, помнитеpostcssизautoprefixerплагин? комбинироватьwebpackдля решения проблем совместимости.

использоватьflexПросто определите родительский элементdisplay:flex, а затем все элементы дочернего элемента имеют функцию flex.
index.html

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>
</div>

index.css

.box { display:flex; }
.box-item { margin:5px; width:100px; height:100px; background:red; }

Сейчас.boxИ дочерние элементы имеют функцию гибкости, которую можно персонализировать с помощью соответствующих функций.Далее каждая функция будет представлена ​​одна за другой.

иллюстрация гибкого термина

flex图示

Две оси гибкости

主轴горизонтальное направление
交叉轴перпендикулярно главной оси

Эти свойства применяются к родительскому элементу

flex-direction

rowУстановите основную ось горизонтальной (по умолчанию слева направо)
row-reverseУстановите основную ось горизонтальной (справа налево)
columnУстановите основную ось вертикальной (по умолчанию сверху вниз)
column-reverseУстановите основную ось вертикально (снизу вверх)

flex-wrap

nowrapбез переноса слов (по умолчанию)
wrapперенос слова
wrap-reverseНачинайте оборачивать снизу вверх

flex-flow

даflex-directionа такжеflex-wrapсокращенное свойство

justify-content

контрольшпиндельвыравнивание
flex-startВыровнять по левому краю
flex-endВыровнять вправо
centerпо центру
space-betweenоправданный
space-aroundСделайте интервал между элементами равным

align-items

контрольоднорядная поперечная осьвыравнивание
flex-startВыровнять по левому краю
flex-endВыровнять вправо
centerпо центруbaselineБазовое выравнивание
stretchЗаполняет всю высоту контейнера по умолчанию

align-content

контрольмногострочная поперечная осьвыравнивание
flex-startВыровнять по левому краю
flex-endВыровнять вправо
centerпо центру
space-betweenоправданный
space-aroundСделайте интервал между элементами равным

Примечание. Если высота задана не по вертикали, тоalign-itemsа такжеalign-contentне удастся

Следующие свойства используются в одном проекте

align-self

покрытиеalign-itemsпока действует в отдельном проекте例子：align-self:flex-start;

order

Измените положение элемента. Чем меньше значение, тем выше фронт. Оно может быть отрицательным. 例子：order:-1;

flex-grow

Установите коэффициент увеличения (безразмерный)例子：flex-grow:2;

flex-shrink

Установите коэффициент сжатия, когда не хватает места (безразмерный)例子：flex-shrink:2;

flex-basis

Установить начальный размер (с единицами измерения) 例子：flex-basis:20%;

flex

даflex-grow,flex-shrink,flex-basisсокращенное свойство

  • Одно значение (выберите одно)
    безразмерное число(): оно будет рассматриваться какflex-growценность .
    допустимое значение ширины: оно будет рассматриваться какflex-basisценность .
    Ключевые слова none, auto или initial.
    例子：flex:auto;
  • двойное значение
    Первое значение должно бытьflex-grow.
    Второе значение может бытьflex-shrinkилиflex-basis

例子：flex:2 2;

  • трехзначный
    flex-grow>
    flex-shrink>
    flex-basis>
    例子：flex:1 1 auto

Справочная документация

Категории