css中的flex（弹性）布局

flex 弹性布局
一. flex 解释
1、flex 布局 为 flexible BOX 的缩写 ，意思为 弹性布局。
2、块级元素和行内块级元素都可以使用flex布局
3、Webkit内核的浏览器，需要加上-webkit前缀。

二. flex 容器 属性

1、flex-direction
此属性决定主轴的方向

.flex{
flex-direction: row; // (默认值) 主轴水平方向，从左往右 如图：
flex-direction: row-reverse; // 主轴水平方向的逆方向，从右往左
flex-direction: column; // 主轴为垂直方向，从上往下
flex-direction: column-reverse; // 主轴为垂直方向的逆方向，从下往上
}
 

 

 

2、flex-wrap
此属性定义，如果一条轴线上排列不下，换行的方式

.flex{
flex-wrap: nowrap; // （默认）不换行 如图:
flex-wrap: wrap; // 正常换行 从上到下 如图：
flex-wrap: wrap-reverse; // 逆方向换行 从下到上 如图：
}
 

 

 

3、flex-flow
此属性定义，是flex-direction和flex-wrap的方式；

.flex {
flex-flow: <flex-direction> 空格 <flex-wrap>;
}
 
4、justify-content
此属性定义，项目在主轴上的对齐方式

.flex{
justify-content: flex-start; // 左对齐（默认）
justify-content: flex-end; // 右对齐
justify-content: center; // 居中
justify-content: space-between; // 两端对齐。且项目间间隔相等
justify-content: space-around; // 每个项目两侧间隔相等，所以项目间 间隔 比项目与边框间间隔大一倍
justify-content: space-evenly; // 项目间间隔与项目与边框间 间隔均匀分配
}