Получите макет Flex быстро

Концепции гибкого макета

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

Элементы в макете Flex, называемые flex-контейнерамиcontainer. Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами.item.

В контейнере по умолчанию две оси,主轴(главная ось) и交叉轴(поперечная ось). По умолчанию элементы располагаются вдоль главной оси. Пространство по главной оси, занимаемое одним элементом, называется основным размером, а занимаемое им пространство по поперечной оси называется поперечным размером.

Главную ось и поперечную ось нельзя просто и грубо понимать как横轴竖轴, потому что их позиции могут быть заменены. Точно так же, если水平Направление – главная ось, тогда главный размер – ширина; если垂直Направление-это основная ось, тогда основной размер высокий

Flex layout может быть указан для любого контейнера

гибкий онлайн предварительный просмотр

.box{    
    display: flex; /* 行内元素: display: inline-flex; */   
    display: -webkit-flex; /* Safari Webkit内核的浏览器，必须加上-webkit前缀。 */  
} 

Обратите внимание:设置了 flex 布局之后，子元素的 float、clear、vertical-align 的属性将失效.

6 свойств контейнера

flex-direction определяет направление главной оси (т.е. направление расположения элементов)

онлайн-просмотр flex-direction

.container {   
   flex-direction: row | row-reverse | column | column-reverse;  
} 

Опции	Представление
ряд (по умолчанию) Шпиндель水平направление, начиная с左侧
row-reverse Шпиндель水平направление, начиная с右侧
column Шпиндель垂直направление, начиная с上方
column-reverse Шпиндель垂直направление, начиная с下方

flex-wrap определяет, можно ли оборачивать элементы в контейнере.

flex-wrap онлайн предварительный просмотр

.container {  
 flex-wrap: nowrap | wrap | wrap-reverse;
}  

Опции	Представление
nowrap (по умолчанию) без новой строки
wrap 项目总尺寸Превосходить主轴尺寸новая строка, первая строка上方
wrap-reverse новая строка, первая строка в下方

flex-flow: коллекция flex-direction и flex-wrap

.container {
    flex-flow: <flex-direction> <flex-wrap>;
}

Значение по умолчанию:flex-direction:row; flex-wrap:nowrap;,

justify-content: определяет выравнивание элементов в направлении главной оси.

flex-wrap онлайн предварительный просмотр

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

Когда главная ось горизонтальна, производительность выглядит следующим образом:

Опции	Представление
гибкий старт (по умолчанию) Направление шпинделя起点выровнять
flex-end Направление шпинделя终点выровнять
center Направление шпинделя居中выровнять
space-between Сначала выровняйте по левому и правому краю, пункт间隔平分расстояние осталось
space-around Обе стороны проекта间隔相等, интервал элемента项目与边缘интервал两倍

align-items: указывает выравнивание элементов по поперечной оси

онлайн-предварительный просмотр align-items

Когда главная ось горизонтальна, производительность выглядит следующим образом:

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

Когда главная ось горизонтальна, производительность выглядит следующим образом:

Опции	Представление
растянуть (по умолчанию) Если элемент не имеет высоты или установлен на авто, он заполнит высоту всего контейнера.
flex-start поперечное направление оси起点выровнять
flex-end поперечное направление оси起点выровнять
center поперечное направление оси居中выровнять
baseline текст первого элемента基线对齐(нижняя часть текста)

align-content: несколько осей определяют выравнивание

онлайн-предварительный просмотр align-items

Если проект имеет только одну осьflex-wrap: nowrap, свойство не будет иметь никакого эффекта

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
} 

Когда главная ось горизонтальнаflex-direction: row, flex-wrap: wrap, который ведет себя следующим образом:

Опции	Представление
растянуть (по умолчанию): Если элемент не имеет высоты или установлено на авто, он будет занимать всю высоту контейнера,轴线平分контейнер垂直направление空间
flex-start: ось находится в направлении поперечной оси起点выровнять
flex-end: ось находится в направлении поперечной оси终点выровнять
центр: ось находится в направлении поперечной оси居中выровнять
space-between: выровняйте оба конца оси,间隔平分вертикальное пространство
пространство вокруг: обе стороны от оси间隔相等, расстояние между осями轴线与边缘интервал两倍

свойства проекта

порядок: определяет порядок, в котором элементы расположены в контейнере数值越小，排列越靠前，默认值为 0

заказать онлайн превью

.item {
    order: <integer>;
}

flex-grow указывает коэффициент увеличения элемента默认为0，即如果存在剩余空间，也不放大

flex-grow онлайн предварительный просмотр

.item {
  flex-grow: <number>; /* default 0 */
}

существует剩余空间Он ведет себя следующим образом:

Опции	Представление
Все элементы имеют свойство flex-grow, равное 1, элементы будут平分оставшееся место
Если один элемент имеет свойство flex-grow, равное 4, а все остальные элементы равны 1, первый займет в 4 раза больше оставшегося места, чем другие элементы.

flex-shrink указывает коэффициент уменьшения элемента默认为1，即如果空间不足，该项目将缩小

flex-shrink онлайн предварительный просмотр

.item {
  flex-shrink: <number>; /* default 1 负值对该属性无效 */
}

. если.

существует空间不足Он ведет себя следующим образом:

Опции	Представление
Все элементы имеют свойство flex-shrink, равное 1, которое等比例缩小
Есть один элемент, у которого свойство flex-shrink равно 0, другие элементы равны 1, первый не сжимается.

flex-basis: указывает пространство главной оси, занимаемое элементом, перед выделением лишнего пространства.浏览器根据这个属性，计算主轴是否有多余空间,默认值为auto，即项目的本来大小

flex-basis онлайн предварительный просмотр

.item {
    flex-basis: <length> | auto; /* default auto */
}

• Шпиндель水平方向, значение flex-basis будет让Проэкт宽度设置неверный
• flex-basis необходимо использовать с flex-grow и flex-shrink, но будет работать только один из flex-grow и flex-shrink (不可能既放大又缩小)
• Для него можно установить то же значение, что и для свойства ширины или высоты (например, 350 пикселей), и элемент будет занимать фиксированное пространство.

Это переводится как:当存在剩余空间下，优先分配flex-basis不为auto的项目后，再分配剩余空间
Пункт 3, как показаноflex-basis：200px;,разноеflex-basis：auto;

align-self: определяет выравнивание элемента и других элементов, которые не совпадают

предварительный онлайн-просмотр align-self

.item {
   align-self: auto | flex-start | flex-end | center | baseline | stretch; /* default auto */
}

Свойство, определяемое одним элементом, указывающее наследование от родительского элемента.align-itemsсвойство, которое эквивалентно растягиванию, если нет родительского элемента.
Если пункт 1align-items:flex-end, остальныеalign-items:flex-start