web前端flex弹性布局

　　flex布局（弹性布局）

• flexible Box
• flex容器：使用display ，flex就是flex容器
• 默认主轴方向排列：row

     flex容器的属性

1.   display属性

• 作用：指定flex属性
• 取值：flex | inline-flex
• flex： 将对象作为弹性伸缩盒展示，相当于块级元素，默认宽度100%  --->  display:block
• inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度 --> display:inline-block

　　2. flex-direction属性

• 作用：指定容器的主轴方向，默认为水平向右方向，项目排列的方向
• 取值：row | row-reverse | column | column | column-reverse
• row:  默认值，水平向右
• row-reverse：水平向左
• column ：垂直向上
• column-reverse ：水平向下

      3.flex-wrap属性

• 作用：描述如果一个轴线排列不下，如何换行
• 取值：nowrap | wrap | wrap-reverse
• nowrap : 默认不换行
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

     4.flex-flow

• 作用:  是flex-direction和flex-wrap合并缩写的形式
• 取值：flex-direction | flex-wrap
• 例如：

    

.container{
  flex-flow: row wrap ; // 水平向右 ，换行  
}

// 等于

.container{
  flex-direction:row;
  flex-wrap:wrap;       
}

 

      5.justify-content 属性 

• 作用：定义在主轴上的对齐方式
• 取值：flex-start | flex-end | center | space-between | space-around 
• flex-start: 默认是从主轴结束的位置对齐
• flex-end：默认是从主轴结束位置对齐
• center 居中对齐，项目形成的总宽度一样
• space-between ： 两端对齐，中间的间隔宽度一样
• space-around ：所有项目的两端间隔相等，主轴两端会留边

       6.align-items属性

•  作用：定义交叉轴上的堆砌方式
•  取值：flex-start | flex-end | center | baseline | stretch
• flex-start : 交叉轴的开始位置对齐
• flex-end ： 交叉轴的结束位置开始对齐
• center ：交叉轴居中
• baseline ：基线对齐，文字第一行对齐
• stretch ：默认值，如果项目为设置高度或设置为auto，将占满整个容器

      7.align-content

• 作用：定义了交叉轴线上的对齐方式
• 说明: 如果只有一个轴线（一行），改属性不起作用，wrap换了行才起作用
• 取值：flex-start | flex-end | center | space-between | space-around 
• flex-start:  所用轴线都从头开始，交叉轴开始位置开始，主轴横轴的话就是，上对齐
• flex-end：从尾开始，交叉轴结束位置开始
• center ：  所用从中间开始
• space-between ：多条轴线上下两端对齐
• space-around ：  多条轴线上下两端分散对齐，上下两侧留白
• stretch ：默认，高度自动拉伸