Web进阶——Flex布局
Flex布局/弹式布局
-
是一种浏览器提倡的布局模型
-
布局网页更加简单、灵活
-
避免浮动脱标的问题
作用
-
基于Flex精确灵活控制跨级盒子的布局方式,避免浮动布局中脱离文档流现象发生。
-
Flex布局非常适合结构化布局
设置方式
- 父元素添加 display:flex ,子元素可以自动挤压或拉伸
组成部分
-
弹性容器
-
弹性盒子
-
主轴
-
侧轴/交叉轴
主轴对齐方式
使用justify-content
调节元素在主轴的对齐方式
-修改主轴对齐方式的属性:justify-content
属性值 | 作用 |
---|---|
flex-start | 默认值,起点开始依次排列 |
flex-end | 重点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列,空白间距分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
侧轴对齐方式
使用align-items
调节元素在侧轴的对齐方式
- 修改侧轴对齐方式属性:
- align-items(添加到弹性容器)
- align-self:控制某个弹性盒子在侧轴对齐方式(添加到弹性盒子)
属性值 | 作用 |
---|---|
flex-start | 默认值,起点开始依次排列 |
flex-end | 重点开始依次排列 |
center | 沿侧轴居中排列 |
stretch | 默认值,弹性盒子沿着主线轴被拉伸铺满容器 |
伸缩比
使用flex
属性修改弹性盒子伸缩比
- 属性
- flex:值
- 取值分类
- 数值(整数)
只占用父盒子剩余尺寸
主轴方向
使用flex-direction
改变元素排列方向
- 主轴默认是水平方向,侧轴默认是垂直方向
- 修改主轴方向属性:
flex-direction
属性值 | 作用 |
---|---|
row | 行,水平(默认值) |
column | 列,垂直 |
row-reverse | 行,从右向左 |
column-reverse | 列,从下向上 |
弹性盒子换行
使用flex-wrap
实现弹性盒子多行排列效果
-
弹性盒子换行显示:
flex-wrap:wrap;
-
调整行对齐方式:
align-content
-
取值与
justify-content
基本相同
本文来自博客园,作者:maplerain,转载请注明原文链接:https://www.cnblogs.com/maplerain/p/16332498.html 博主B站