Flex布局的基本语法和实例

Properties for the Parent（应用在父元素上）

(flex 盒子)

display: flex

定义父元素为flex元素

flex-direction

子元素的排列方向

• row (默认值): 从主轴起点到到主轴终点

  
  
  

  Paste_Image.png

• row-reverse: 从主轴终点到主轴起点

  
  
  

  Paste_Image.png

• column: 从侧轴起点到侧轴终点

  
  
  

  Paste_Image.png

• column-reverse:从侧轴终点到侧轴起点

  
  
  

  Paste_Image.png

flex-wrap

子元素在主轴上铺满时，是否换行

• Nowrap（默认值）:不换行
• Wrap:换行且从顶部到到底部排列
• Wrap-reverse:换行且从底部到到顶部排列

flex-flow:flex-direction属性值 flex-wrap属性值;

justify-content

主轴方向对齐方式
定义了沿着主轴对齐。
它帮助分赔剩下多余的空闲空间给所有的flex项目。

• flex-start (默认值): flex项目从主轴起点开始无空闲空间地排列在一起
• flex-end: flex项目从主轴终点开始无空闲空间地排列在一起
• center: flex项目排列在主轴中间，两边空闲空间均匀分批
• space-between: 在主轴上的空闲空间均匀地分配到每两个flex项目中间
• space-around: 在主轴上的空闲空间均匀地分配到每个flex项目两边

align-items

侧轴对齐方式

stretch (默认值):把所有的元素伸开，所有flex项目的高度以最高的flex项目为准

• flex-start: 在主轴上排列的flex项目顶部，对齐侧轴的起点
• flex-end: 在主轴上排列的flex项目底部，对齐侧轴的终点
• center: 在主轴上排列的flex项目中部，对齐侧轴的中间
• baseline: flex项目延文本基线对齐

align-content

当出现多行flex项目时，侧轴方向对齐方式

• stretch (默认值): flex盒子和flex项目没设置高度时，盒子高度以高度最高的flex项目为准
• flex-start: 多行flex项目顶部对准侧轴起点
• flex-end: 多行flex项目底部对准侧轴终点
• center: 多行flex项目中部对准侧轴中间，空闲空间均匀分配打破多行flex项目两边
• space-between:侧轴方向上，空闲空间均匀分配到每两行flex项目的中间
• space-around: 侧轴方向上，空闲空间均匀分配到每行flex项目的两边

Properties for the Children（应用在所有的子元素上）

(flex 项目)

Order：整数编号;

可以正负符号，设置子元素排列的先后顺序号

flex-grow：

如果只有一个子元素设置了flex-grow的值，则这个子元素分配剩下的所有的空闲空间
如果多个子元素设置了flex-grow的值，则按照值的比例来分配剩下的空闲空间

flex-shrink

按照子元素设置的flex-shrink值，来按比例收缩flex项目

flex-basis

设置flex项目的宽度大小，可以是比例也可以是长度单位
如果设置为0,内容不考虑周围的额外空间
如果设置为自动,对其flex-grow值的额外的空间进行分配

Flex:flex-grow flex-shrink flex-basis;

这是缩写flex-grow,flex-shrink flex-basis总和。第二个和第三个参数(flex-shrink和flex-basis)是可选的。默认是0 1。