flex布局

文章字数：589,阅读全文大约需要2分钟

一、Flex布局是什么

1. Flex即弹性布局，设置容器内部空间如何布局
2. 任何容器都能设置display: flex
3. 行内元素也可以设置display: inline-flex
4. 设置flex之后，子元素float、clear、vertical-align都会失效

二、基本概念

1. flex容器即flex container
2. 子元素自动成为容器成员，即flex item

• flex container

     cross start  ^ 
                  |
             cross axis
                  |
                  |
  main start      |      main end
  <---main axis------------------>
                  |
                  |
                  |
                  |
      cross end   v

• flex item

        ^
        |
        |
    cross size
        |
        |
<----------main size--->
        |
        |
        |
        V

三、容器属性

属性名	作用	属性值	含义
flex-direction	主轴方向	row	从左向右，默认
-	-	row-reverse	从右向左
-	-	column	从上到下
-	-	column-reverse	从下到上
flex-wrap	主轴换行模式	nowrap	不换行，默认
-	-	wrap	换行，多余的在下
-	-	wrap-reverse	换行，多余在上
flex-flow	主轴方向及换行	flex-flow:	主轴方向 换行
justify-content	主轴对齐方式	flex-start	向主轴开端对齐，默认
-	-	flex-end	向主轴末尾对齐
-	-	center	居中
-	-	space-between	两端对齐，项目间间隔相等
-	-	space-around	每个项目两侧间隔都相等
align-items	交叉轴对齐方式	flex-start	交叉轴开端对齐
-	-	flex-end	交叉轴末尾对
-	-	center	居中对齐
-	-	baseline	项目的第一行文字基线对齐
-	-	stretch	如果未设置高度，或者auto，占满整个容器
align-content	换行之后各行对齐方式	flex-start	对齐交叉轴起点
-	-	flex-end	对齐交叉轴终点
-	-	center	居中
-	-	space-between	交叉轴两端对齐
-	-	space-around	交叉轴间间隔相等
-	-	stretch	占满整个交叉轴，默认

四、项目属性

属性名	作用	属性值	含义
order	项目排列顺序	int	小的靠前
flex-grow	项目放大比例	int	默认0，不放大
flex-shrink	项目缩小比例	int	默认1，空间不足按比例缩小
flex-basis	主轴再分配多余空间前，项目占用的空间	px	默认auto,及项目本身大小
flex	放大、缩小比例、空间分配三个合并	none,flex-grow flex-shrink flex-basis	默认 0 1 auto
align-self	元素交叉轴对齐方式	auto	继承父元素align-items，默认
-	-	flex-start	交叉轴起点对齐
-	-	flex-end	交叉轴终点对齐
-	-	center	中心对齐
-	-	baseline	项目第一行文字对齐
-	-	stretch	占满容器（未设置高度）

---