2023-08-13

一、布局模型

Flexible Box弹性布局

任意容器都可以指定成flex布局：

.box {

display: flex;

}

<!-- 行内元素 -->

.box {

display: inline-flex;

}

设为flex布局后，子元素的float、clear、vertical-align将失效

称采用Flex布局的元素为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目(flex item)。

两根轴：

水平主轴 main axis

主轴与边框的左右交叉点 main start/main end

垂直交叉轴 cross axis

交叉轴与边框的上下交叉点 cross start/cross end

项目（flex item）默认沿主轴排列，单项目占据的主轴空间/交叉轴空间 main size/cross size

二、flex容器属性

flex-direction 决定主轴方向=项目排列方向

flex-wrap 定义如何换行

flex-flow 它是flex-direction和flex-wrap的简写形式，

justify-content 定义项目在主轴上的对齐方式

align-items 定义项目在交叉轴上的对齐方式align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。

1.flex-direction值：

row(默认值) 主轴为水平方向，起点在左端row-reverse 主轴为水平方向，起点在右端column 主轴为垂直方向，起点在左端column-reverse 主轴为垂直方向，起点在右端

2.flex-wrap值：nowrap(默认) 不换行

wrap 换行，第一行在上方

wrap-reverse 换行，第一行在下方

默认情况，所有flex项目会排在一条线上，不会自动换行

3.flex-flow默认值：row nowrap

.box {

  flex-flow: <flex-direction> <flex-wrap>;

}