弹性布局学习总结
原文链接:http://caibaojian.com/flexbox-guide.html
请注意:
1.css 列(CSS columns)在弹性盒子中不起作用·
2.float
, clear
and vertical-align
在flex项目中不起作用
flex-direction(适用于父累容器的元素上):设置或检索伸缩纸盒对象的子元素在父容器中的位置
值:flex-direction:row| row-reverse | column | column-reverse
row:横向从左到右排列(左对齐),默认的排列方式
row-reverse:反转横向排列(右对齐)
column:纵向排列
column-reverse:反转纵向排列
flex生效需定义其父元素display为flex或inline-flex(box或inline-box,这是旧的方式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .box{ display:-webkit-flex; display:flex; margin:0;padding:10px;list-style:none;background-color:#eee;} .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;} #box{ -webkit-flex-direction:row; flex-direction:row; } #box2{ -webkit-flex-direction:row-reverse; flex-direction:row-reverse; } #box3{ height:500px; -webkit-flex-direction:column; flex-direction:column; } #box4{ height:500px; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; } </style> <body> <h2>flex-direction:row</h2> <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:row-reverse</h2> <ul id="box2" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:column</h2> <ul id="box3" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:column-reverse</h2> <ul id="box4" class="box"> <li>a</li> <li>b</li> </body> </html>
flex-wrap(适用于父类容器上):设置或者检索伸缩盒对象的子元素超出父容器时是否换行
flex-wrap:nowrap | wrap |wrap-reverse
nowrap:当子元素溢出父容器时不换行。
wrap:当子元素溢出父容器时自动换行。
wrap-reverse:反转wrap排列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .box{ display:-webkit-flex; display:flex; width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;} .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;} #box{ -webkit-flex-wrap:nowrap; flex-wrap:nowrap; } #box2{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } #box3{ -webkit-flex-wrap:wrap-reverse; flex-wrap:wrap-reverse; }</style> <body> <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-wrap:wrap</h2> <ul id="box2" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-wrap:wrap-reverse</h2> <ul id="box3" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> </body> </html>
justify-content(适用于父类容器上):设置或检索弹性盒子元素再主轴(h横轴)方向的对齐方式。
当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时,这一属性可协助对多余的空间进行分配。当元素溢出某行时,这一属性同样会在对齐上进行控制。
justify-content:flex-start | flex-end | center | sapce-betweenn | space-around
flex-start:弹性盒子元素将向行始位置对齐。
flex-end:弹性盒子元素将向行借宿位置对齐
center:弹性盒子元素将向行中间位置对齐
jusryfy-content:space-between:弹性盒子元素会平均地分布在行里。
space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。