语法高亮不太好用，忽略高亮不合理的地方

1、设置在容器上的属性

flex-direction : 主轴的方向

row: (默认)从左到右横向
row-reverse: 从右到左横向
column: 从下到上竖向
column-reverse: 从下到上竖向

flex-wrap : 主轴是否换行

nowrap: (默认)不换行
wrap: 换行，新行在第一行下方
wrap-reverse: 换行，新行在第一行上方

flex-flow : 是flex-direction和flex-wrap的缩写

<flex-direction的值>(可选) <flex-wrap的值>(可选)

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

flex-start: (默认)左对齐
flex-end: 右对齐
center: 居中
space-between: 两端与容器无间隔，项目之间平分间隔
space-around: 每个项目两侧的间隔相等
              (注意，项目与项目之间的距离，是项目与容器边框的距离的2倍)

align-items : 交叉轴上的对齐方式

stretch: (默认)如果项目未设置高度或设为auto，会占满整个容器的高度
flex-start: 与交叉轴的起点对齐，高度是项目本来的高度，下同
flex-end: 与交叉轴的终点对齐
center: 与交叉轴的中点对齐
baseline: 与项目的第一行文字的基线对齐

align-content : 多根轴线的对齐方式，一根轴线无效

stretch: (默认)轴线占满整个交叉轴
flex-start: 参考justify-content
flex-end: 参考justify-content
center: 参考justify-content
space-between: 参考justify-content
space-around: 参考justify-content

二、设置在项目上的属性

order : 项目的排列顺序

<number> 数值越小越靠前，允许负值，默认为0

flex-grow : 项目放大的比例

<number> 如果存在剩余空间，数字越大，分配的剩余空间越大
         如果每个项目的此项值都相等，将等分剩余空间，
         默认为0，即就算有剩余空间也不放大

flex-shrink : 项目的缩小比例

<number> 空间不足的情况下，数字越大，缩小的比例越大
         如果每个项目此项值都相等，将等比例缩小
         默认为1，即如果空间不足将缩小
         0为不缩小

flex-basis : 项目的初始大小，设置此项后，width失效

auto (默认)本来大小
<length> 具体数值

flex : 是flex-grow、flex-shrink、flex-basis的简写

0 1 auto(默认)
auto 等于 1 1 auto
none 等于 0 0 auto

align-self : 如何在纵轴上对齐项目自身

auto (默认)继承容器的align-items
... 其他值和align-items的值完全一致

标签: CSS3, flex布局

评论已关闭