flex布局是极其简单的一种布局，一般只需要给父元素display属性赋值“flex”，即可实现flex布局。（此时float、clear、vertical-align属性均失效），其子元素不论是什么盒子均具有高度和宽度。

主轴和侧轴

在 flex 布局中，是分为主轴和侧轴两个方向的，同样的叫法有： 行和列、x轴和y轴

  • 默认主轴方向为x轴方向，水平向右
  • 默认侧轴方向为y轴方向，垂直向下

常见父项属性

  • flex-direction : 设置主轴的方向
属性值说明
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上
  • justify-content : 设置主轴上子元素的排列方式
属性值说明
flex-start默认值从头部排列
flex-end从尾部排列
center在主轴居中对齐
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间
  • flex-wrap : 设置子元素是否换行
属性值说明
nowrap默认值不换行（装不下时会自动缩减子盒子大小）
flex-end换行
  • align-content : 设置侧轴上的子元素的排列方式（多行）
属性值说明
flex-start默认值从头部排列
flex-end从尾部排列
center在侧轴居中对齐
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间
stretch子元素长度平分侧轴父元素长度（子元素不要给侧轴对应长度）
  • align-items : 设置侧轴上的子元素的排列方式（单行）
属性值说明
flex-start默认值从头部排列
flex-end从尾部排列
center在侧轴居中对齐
stretch将子元素拉伸到侧轴长度（子元素不要给侧轴对应长度）

  • flex-flow : 复合属性，相当同时设置了 flex-direction 和 flex-wrap

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

常见子项属性

  • flex : 控制子项所占剩余空间的份数

    1
    flex:<number>; //默认值为0

  • order : 控制顺序，数值越小越靠前

  • flex-self : 控制单行子项自己在侧轴的排列方式，属性值与align-items相同