Flex 布局详解 一、入门 1. flex 是什么? flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思 2. 为什么我们需要 flex?
解决元素居中问题
自动弹性伸缩,合适适配不同大小的屏幕,和移动端
3.flex 常见术语 三个2外面的大容器的属性的设置
1. flex-direction 主轴方向 2. flex-wrap 主轴一行满了换行 3. flex-flow 1和2的组合 4. justify-content 主轴元素对齐方式 5. align-items 交叉轴元素对齐方式//单行 6. align-content 交叉轴行对齐方式//多行 1.flex-direction 主轴方向 row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .container{ display: flex; height: 600px; background-color: rgb(219, 219, 219); } .container{ flex-direction: row; /* flex-direction: row-reverse; */ /* flex-direction: column; */ /* flex-direction: column-reverse; */ } .item{ padding: 100px; } </style> <body> <div class="container"> <div class="item" style="background-color: antiquewhite;">1</div> <div class="item" style="background-color: aqua;">2</div> <div class="item" style="background-color: aquamarine;">3</div> </div> </body> </html> 2. flex-wrap 主轴一行满了换行 nowrap (默认值) 不换行压缩宽度 wrap 换行 wrap-reverses 反向换行code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .container{ display: flex; height: 600px; background-color: rgb(219, 219, 219); } .container{ /* flex-wrap: nowrap; */ flex-wrap: wrap; /* flex-wrap: wrap-reverse; */ } .item{ padding: 100px; } </style> <body> <div class="container"> <div class="item" style="background-color: antiquewhite;">1</div> <div class="item" style="background-color: aqua;">2</div> <div class="item" style="background-color: aquamarine;">3</div> <div class="item" style="background-color: #aaff00;">4</div> <div class="item" style="background-color: #ffff00;">5</div> </div> </body> </html> 3. flex-flow 1和2的组合flex-low: [flex-direction] [flex-wrap]
就是 1 和 2 的组合,简写,同上,这里不赘述.
4.justify-content 主轴元素对齐方式这里是元素的对齐,区别于刚刚的「方向」
flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向) flex-end 靠着main-end对齐//参考常见术语(一般是右方向) center 靠着主轴居中对齐//一般就是居中对齐 space-between 两端对齐,靠着容器壁,剩余空间平分 space-around 分散对齐,不靠着容器壁,剩余空间在每个项目二侧平均分配 space-evenly 平均对齐,不靠着容器壁,剩余空间平分[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0XtTfMok-1617198199737)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331202332871.png)]
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .container{ display: flex; height: 600px; background-color: rgb(219, 219, 219); } .container{ /* justify-content: flex-start; */ /* justify-content: flex-end; */ /* justify-content: center; */ /* justify-content: space-between; */ /* justify-content: space-around; */ justify-content: space-evenly; } .item{ padding: 100px; } </style> <body> <div class="container"> <div class="item" style="background-color: antiquewhite;">1</div> <div class="item" style="background-color: aqua;">2</div> <div class="item" style="background-color: aquamarine;">3</div> </div> </body> </html> 5.align-items item「项目」在交叉轴上对齐方式「单轴」这个是 container 容器的属性,设置的是 items 项目元素在交叉轴上对齐样式
flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch(默认值)伸展:如果项目未设置高度或设为auto,将占满整个容器的高度。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M3NM0lPU-1617198199738)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331202806289.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qRTaNjB3-1617198199738)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331202841120.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJcAxttN-1617198199739)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331202915627.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IQRRRImF-1617198199739)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331203018581.png)]
(一般用不着,本来就在一条直线上)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HdFoqxvK-1617198199740)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331203130876.png)]
伸展,就是会填充宽度
6. align-content 交叉轴行对齐方式 多行这个和 justify-content 属性一模一样,
justify-conent,align-items,align-content 都极度相似.
flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向) flex-end (每一行)靠着cross-end对齐//参考常见术语(一般是右方向) center (每一行)靠着cross线居中对齐//一般就是居中对齐 space-between (每一行)两端对齐,靠着容器上下壁,剩余空间平分 space-around (每一行)分散对齐,不靠着容器壁,剩余空间在每个项目二侧平均分配 strentch (每一行)伸缩,占满整个高度[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U2ZOSywe-1617198199740)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331204122090.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A6fkJxob-1617198199741)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331204205734.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ktdtd7a5-1617198199741)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331204303849.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0S4Crn9F-1617198199742)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331204403783.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jJoxfZhk-1617198199742)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331205003164.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvepSPIg-1617198199743)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331205106522.png)]
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .container{ display: flex; height: 800px; background-color: rgb(219, 219, 219); /* 因为需要多行,所以要换行 */ flex-wrap: wrap; } .container{ align-content: flex-start; /* align-content: flex-end; */ /* align-content: center; */ /* align-content: space-between; */ /* align-content: space-around; */ /* align-content: stretch; */ } .item{ padding: 100px; } </style> <body> <div class="container"> <div class="item" style="background-color: antiquewhite;">1</div> <div class="item" style="background-color: aqua;">2</div> <div class="item" style="background-color: aquamarine;">3</div> <div class="item" style="background-color: #aaff00;">4</div> <div class="item" style="background-color: #ffff00;">5</div> </div> </body> </html> 三、项目元素 item 的属性容器里面的子元素item「项目」的属性
flex-grow:长大 flex-shrinik: 缩小 align-self: 覆盖container align-items 属性 order 排序 flex-basis: 有效宽度 1.flex-grow 长大在容器主轴上存在剩余空间时, flex-grow才有意义
该属性的值,称为放大因子, 常见的属性值如下:
放大后的效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YpUIt0c4-1617198199743)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331210642331.png)]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .container{ display: flex; height: 800px; background-color: rgb(219, 219, 219); } .item{ padding: 100px; } .item1{ /* 其他的都是0,这一个是1,所以能所有剩下的空间都是item1的 */ flex-grow: 1; } </style> <body> <div class="container"> <div class="item item1" style="background-color: antiquewhite;">1</div> <div class="item" style="background-color: aqua;">2</div> <div class="item" style="background-color: aquamarine;">3</div> </div> </body> </html> 2. flex-shrinik: 缩小 当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义该属性的值,称为收缩因子, 常见的属性值如下:示例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJ19VxlF-1617198199744)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331212509330.png)]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .container{ display: flex; height: 800px; width: 400px; background-color: rgb(219, 219, 219); flex-direction: row; flex-wrap: nowrap; align-content: flex-start; } .item{ width: 200px; height: 200px; font-size: 1.5rem; /* 禁止收缩 */ flex-shrink: 0; } .item1{ flex-shrink: 1; } .item2{ flex-shrink: 0; } .item3{ flex-shrink: 3; } /* container 容器的宽度是 400,3个字元素总宽度是 600 超过了 200 然后按照比例缩小到这些元素上 200/4 = 50 item1 缩小 50 * 1 = 50,还剩 150 item2 不缩小 item3 缩小 50 * 3 = 150 还剩 50 */ </style> <body> <div class="container"> <div class="item item1" style="background-color: antiquewhite;">1</div> <div class="item item2" style="background-color: aqua;">2</div> <div class="item item3" style="background-color: aquamarine;">3</div> </div> </body> </html> 3. align-self: 覆盖container align-items 属性 该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式例子:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d04IVcCQ-1617198199744)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331213131744.png)]
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .container{ display: flex; height: 800px; background-color: rgb(219, 219, 219); flex-direction: row; flex-wrap: nowrap; } .container{ /* container指定容器的对齐 flex-start */ align-items: flex-start; } .item{ width: 200px; height: 200px; } .item3{ /* 元素3 item3 覆盖container的设置,flex-end */ align-self: flex-end; } </style> <body> <div class="container"> <div class="item item1" style="background-color: antiquewhite;">1</div> <div class="item item2" style="background-color: aqua;">2</div> <div class="item item3" style="background-color: aquamarine;">3</div> </div> </body> </html> 4. order 排序[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5s7KjlQX-1617198199745)(Flex%E5%B8%83%E5%B1%80%E8%AF%A6%E8%A7%A3.assets/image-20210331213812047.png)]
就是将元素重新排序
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .container{ display: flex; height: 800px; background-color: rgb(219, 219, 219); } .item{ width: 200px; height: 200px; order: 0; } .item1{ order: 3; } </style> <body> <div class="container"> <div class="item item1" style="background-color: antiquewhite;">1</div> <div class="item item2" style="background-color: aqua;">2</div> <div class="item item3" style="background-color: aquamarine;">3</div> </div> </body> </html> 5. flex-basis属性flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item { flex-basis: <length> | auto; /* default auto */ }它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
参考:
Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
flex布局(主轴方向 、主轴项目对齐方式 、交叉轴项目对齐 、项目顺序 、项目独立对齐方向 ) - 前端 - php中文网博客
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |