Flex弹性盒子常见用法

1.Flex布局

Flex常用属性

• flex-direction
• flex-wrap
• flew-flow
• justify-content
• align-items
• align-content

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

1.1flex-direction

flex-direction: row | row-reverse | column | column-reverse

包含四个属性值

row: 默认值，表示沿水平方向，由左到右。

row-reverse ：表示沿水平方向，由右到左

column：表示垂直方向，由上到下

column-reverse:表示垂直方向，由下到上

1.2flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse

nowrap：不换行，元素宽度失效，强行显示在一行

wrap：正常换行，第一个位于第一行的第一个

wrap-reverse：反向换行，第一个位于最下面

1.3justify-content

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等

space-around：每个项目两侧间隔相等

1.4align-items

align-items: flex-start | flex-end | center | baseline | stretch

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline：项目的第一行文字的基线对齐

stretch：如果项目为设置高度或为auto，将占满整个容器的高度

1.5align-content

控制多行项目，设置后align-items会失效

align-content: flex-start | flex-end | center | space-between | space-around

flex-start：与交叉轴起点对齐

flex-end：与交叉轴终点对齐

center：与交叉轴的中点对齐

space-between：与交叉轴两端对齐，轴线之间

space-around：轴线占满整个交叉轴