Flex布局

参考 Flex 布局的基本概念

flex

display: flex;

flex-direction

设置主轴方向， 可用值

• row 水平方向
• cloumn 垂直方向
• row-reverse 水平反转
• column-reverse 垂直反转

flex

Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

flex: 1 1 auto;

flex: initial 是把flex元素重置为Flexbox的初始值, 它相当于 flex: 0 1 auto

flex: auto 等同于 flex: 1 1 auto, flex元素在需要的时候既可以拉伸也可以收缩

flex: none 可以把flex元素设置为不可伸缩。它和设置为 flex: 0 0 auto 是一样的。元素既不能拉伸或者收缩，但是元素会按具有 flex-basis: auto 属性的flexbox进行布局。

flex-basic

flex-basis 定义了该元素的空间大小

如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给Flex元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。

flex-grow

flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间

flex-shrink

flex-shrink 属性是处理flex元素在主轴上收缩空间的问题

justify-content

设置主轴方向对其方式

• flex-end
• flex-start
• center: 居中
• start
• end
• space-around
• space-between

align-items

设置子元素在交叉轴对齐方式

• flex-start 交叉轴的起点开始
• flex-end 交叉轴终点开始
• center 剧中
• baseline 第一行文字的基线
• stretch 占满整个空间

align-items: center;

alian-content

多根轴对齐方式， 如果只有一根轴， 该属性不起作用

• flex-start 与交叉轴的起点对齐
• flex-end 与交叉轴的终点对齐
• center 与交叉轴的中点对齐
• space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around 每根轴线两侧的间隔都相等
• stretch 轴线占满整个交叉轴

flex-wrap

设置子元素在主轴上换行方式

• nowrap 不换行
• wrap 自动换行
• wrap-reverse 和 wrap 相反

flex-wrap: nowrap;

align-self

定义 flex 子项单独在侧轴（纵轴）方向上的对齐方式

• auto 默认值
• stretch
• center
• flex-start
• flex-end
• baseline
• initial
• inherit

flex-flow

你可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow