flex(弹性盒,伸缩盒)
- 是css中又一种高级的布局手段,主要就是用来替代浮动布局
- flex布局通常是用于移动端,自适应布局
- 通过display:flex; 就可以设置该元素为弹性盒,
- 注意:一旦为元素设置了flex , 该元素的clear float 失效
- 一旦开启了弹性布局,该弹性盒会自动产生两个方向轴
- 主轴
- 侧轴
- 弹性容器:开启了flex属性的元素称作为弹性容器
- 弹性容器的css属性:
1、flex-direction 指定容器中元素的排列方式(更改主轴)
- row 默认值 弹性元素在容器中从左往右水平排列 - 主轴
- column 弹性元素在容器从上往下垂直排列 - zhu'zhou
2、flex-wrap 设置弹性元素是否在容器中自动换行
- nowrap 默认值 ,不会换行
- wrap 沿着侧轴换行
3、 flex-flow 是flex-direction和 flex-wrap的简写形式
4、 justify-content 设置弹性元素在主轴上的排列方式
- flex-start 沿着主轴排列 (默认值)
- flex-end 沿着主轴反方向排列
- center 主轴水平居中排列
- space-around 分配空白区域
- space-between 分配空白区域
- space-evenly 分配空白区域
5、 align-items 元素在侧轴上的对齐方式,排列方式
- stretch 默认值
- flex-start 沿着侧轴起点排列
- flex-end 沿着侧轴终点排列
- center 在侧轴上居中对齐
- baseline 基线对齐
6、 align-content 分配侧轴元素之间的空白(注意该属性一定是 flex-wrap: wrap; )
- flex-start
- flex-end
- center
- space-between
- space-around
- 弹性元素(项目)
- 弹性元素就是该弹性盒下的直接的子元素
- 1、order 定义项目的排列顺序 ,值越小 越靠前,默认值都是0
- 2、flex 指定盒子的伸缩
- 3、align-self 用来覆盖当前元素上的align-items ,指定单个元素在侧轴上对齐的方式
注意:弹性元素,既可以作为弹性元素,也可以变成弹性容器