flex布局
主成部分
-
弹性容器:父元素
-
弹性盒子:子元素
-
主轴:默认X轴,可以通过flex-direction改变
-
侧轴 / 交叉轴:默认Y轴,可以改变
设置
语法:display: flex
添加位置:父元素
父元素添加 display: flex,子元素可以自动的挤压或拉伸
主轴对齐方式
属性:justify-content
作用:设置弹性盒子(子元素)在主轴上的对齐方式
添加位置:父元素
值:
属性值 | 作用 |
---|---|
flex-start | 默认值, 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center |
沿主轴居中排列 |
space-around |
弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between |
弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly |
弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
侧轴对齐方式
属性:align-items
作用:设置单行子元素在侧轴上的对齐方式
添加位置:父元素
属性:align-self (用在单个子元素上)
作用:设置单个子元素在侧轴上的对齐方式
添加位置:单个子元素
值:
属性值 | 作用 |
---|---|
flex-start | 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center |
沿侧轴居中排列 |
stretch | 默认效果, 子元素如果没有设置具体侧轴方向长度时,弹性盒子沿着侧轴线被拉伸至铺满容器 |
属性:align-content
作用:设置多行子元素侧轴对齐方式
添加位置:父元素
通常与flex-wrap或flex-flow(flow是flex-direction和flex-wrap属性的简写方式)一起用
值:
属性值 | 作用 |
---|---|
stretch | 默认值,弹性盒子没设置侧轴方向长度时,拉伸 |
flex-start | 默认值, 侧轴开始位置对齐 |
flex-end | 侧轴结束位置对齐 |
center | 弹性盒子居中,弹性盒子侧轴方向间离为0 |
space-around | 弹性盒子沿侧轴两端距离是中间等距的一半 |
space-between | 弹性盒子沿侧轴两端位置对齐,中间等距 |
space-evenly | 在沿侧轴方向,弹性盒子两侧等距 |
伸缩比
属性:flex
作用:设置子元素伸缩比
添加位置:子元素
使用:flex:份数
1份 =主轴剩余宽度(如果有间隔,需要去掉所有间隔) /总份数
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
* { margin: 0; padding: 0; } li { list-style: none; } ul { display: flex; height: 500px; background-color: #ccc; } ul li { margin-left: 10px; } li:nth-child(1){ /* flex:份数 1份 =主轴剩余宽度(如果有间隔,需要去掉所有间隔) /总份数 添加到子元素上 设置子元素伸缩比 */ flex: 2; background-color: #f00; } li:nth-child(2) { /* 如果有设置了固定宽度的子元素,1份 =主轴剩余宽度(如果有间隔,需要去掉所有间隔,去掉子元素固定宽度) /总份数 */ /* 如果同时设置了flex,width,优先执行flex,这时width就无效 */ /* flex: 1; */ width: 200px; background-color: yellow; } li:nth-child(3) { flex: 1; background-color: green; } li:nth-child(4) { flex: 1; background-color: pink; } li:nth-child(5) { flex: 1; background-color: purple; }
弹性盒子如果同时设置了flex:1,width,优先执行flex:1,这时width就无效
设置主轴方向
属性:flex-direction
作用:修改主轴方向,改变子元素排列方向
添加位置:父元素
值:
属性值 | 作用 |
---|---|
row |
行, 水平(默认值) |
column |
*列, 垂直 |
row-reverse | 行, 从右向左 |
column-reverse | 列, 从下向上 |
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
* { margin: 0; padding: 0; } ul { display: flex; /* 设置主轴方向 row 行, 水平(默认值) column * 列, 垂直 row-reverse 行, 从右向左 column-reverse 列, 从下向上 */ flex-direction: column-reverse; /* 主轴对齐方式 */ justify-content: space-between; /* 单行子元素侧轴对齐方式 */ align-items: center; width: 500px; height: 500px; margin: 0 auto; background-color: #ccc; } li { list-style: none; width: 80px; height: 80px; background-color: #f00; } li:nth-child(even) { background-color: #0f0; }
实现效果:
换行
属性:flex-wrap
作用:实现弹性盒子多行排列效果
添加位置:父元素
值:
属性值 | 作用 |
---|---|
nowrap |
不换行,默认 |
wrap | 换行,主轴X:从上往下 主轴Y:从左向右 |
wrap-reverse | 倒序换行:主轴X:从下向上 主轴Y:从右向左, |
注意: wrap-reverse,会影响到align-content: flex-start/ flex-end;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性