前几天,我在一个外网上看到一篇flexbox的文章,图文并茂,特别不错。所以,特地转了几张图片分享给大家!(本文未对flex的属性进行解释,仅适用于有一定基础的朋友阅读。)
介绍
2009年,W3C提出了一种新的方案,叫Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。连bootstrap4都是基于flex来设计的。
Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局(display: flex;
)。
![]()
flex-direction
元素的排列方向
![]()
flex-wrap
决定是否换行
![]()
justify-content
元素在主轴上的对齐方式
![]()
![]()
align-items
元素在交叉轴上如何对齐
![]()
![]()
align-content
行与行的对齐方式
![]()
align-self
元素自身在交叉轴的对齐方式
![]()
![]()
order
元素的排列顺序,数字越小越靠前,默认为0。
![]()
flex-grow&flex-shrink
flex-grow是定义元素的放大比例
,默认为0,即如果存在剩余空间
,也不放大。
flex-shrink是定义元素的缩小比例
,默认为1,即如果空间不足
,该项目将缩小。
关于比例的计算,后续会更新相关介绍!
![]()
![]()
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
![]()
测试代码
提供相关测试代码,可自行理解测试!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
| <!DOCTYPE html> <html lang="zh" > <head> <meta charset="UTF-8"> <title>flex-test</title> <style type="text/css"> * { margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } body{ display: flex; flex-direction: row; justify-content: center; align-items: center; } .bigdiv{ width: 600px; height: 60%; background: #e2cafd; margin: 10px auto; border: 1px solid #000; } .box1,.box2,.box3 { background: #ffa378; height: 100px; border-radius: 30px; line-height: 100px; font-size: 50px; font-weight: bolder; overflow: hidden; } .box1{ width: 200px; } .box2{ width: 300px; } .box3{ width: 100px; } </style> </head> <body> <div class="bigdiv"> <div class="box1"> HXB </div> <div class="box2"> HXB </div> <div class="box3"> HXB </div> </div> </body> </html>
|