flex布局可以极大提高我们布局的效率,更加灵活简洁,不脱标,可以避免浮动脱标的问题.
语法:dispkay:flex
display: flex 一定要给亲爸爸加,加了flex布局后,父元素成为弹性容器,子元素成为弹性盒子.子元素默认水平排列,可以自动挤压或拉伸.
组成部分:
- 1.弹性容器
- 2.弹性盒子
- 3.主轴
- 4.侧轴/交叉轴
主轴对齐方式
属性名:justify-content
属性值:
- flex-start 默认值,起点开始依次排列
- flex-end 终点开始依次排列
- center 沿主轴居中排列
- space-around 弹性盒子沿主轴均匀排列,空白间距均分在盒子两侧 缝隙1:2
- space-between 弹性盒子沿主轴均匀排列,空白间距均分在相邻盒子之间 没有缝隙,两边靠边
- space-evenly 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 缝隙1:1
侧轴对齐方式
属性名:
align-items (添加到弹性容器)
align-self 控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
属性值
- flex-start 默认值,起点开始依次排列
- flex-end 终点开始依次排列
- center 沿侧轴居中排列
- stretch 默认值,弹性盒子沿主轴线拉伸至铺满容器
注意:
align-content 用于设置多行弹性盒子侧轴对齐方式,取值与justify-content相同
align-items 设置单行弹性盒子侧轴对齐方式
伸缩比
把盒子氛围若干份.每个盒子各站几份
属性名:flex
属性值:数值(整数)
比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。
圣杯布局
圣杯布局就是左右两边宽度固定,中间宽度自适应,一般用于移动端顶部搜索部分,如京东顶部搜索栏
小结:
1.在flex眼中,标签不再分类
- 简单来说就是没有块元素,行内块元素和行内元素
- 任何一个元素都可以直接设置宽高.
2.flex不存在脱标情况,基本淘汰浮动.
3.有兼容性问题,如果是移动端直接可以使用,pC端需考虑兼容问题.
