css-flex 属性学习
flex-direction:排列方向。 row | column | row-reserve | column-reserve
flex-wrap: 是否换行。 wrap | nowrap | wrap-reserve
flex-flow:flex-direction&&flex-wrap简写模式。 默认值为:row nowrap。
justify-content:定义了主轴的对其方式。 flex-start | flex-end | center | space-between | space-around;
align-item:交叉轴上如何对齐。flex-start | flex-end | center | baseline | stretch;
css-flex 面试题
- 内容宽度等分
<html> <head> <style type="text/css"> .main{ width:100%; display:flex; height:100%; } .main div{ flex:1; height:100%; border:1px solid #333; } </style> </head> <body> <div class="main"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
-
左右布局,一侧定宽一侧自适应填满
<html> <head> <style type="text/css"> .main{ width:100%; display:flex; height:100%; } .left,.right{ height:100%; border:1px solid #333; box-sizing:border-box; } .left{ width:300px; } .right{ width:100%; } </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
-
未知高度上下左右居中
<html> <head> <style type="text/css"> .main{ width:100%; display:flex; height:100%; justify-content:center; align-items:center; } .box{ width:300px; border:1px solid #333; } </style> </head> <body> <div class="main"> <div class="box">未知高度上下左右居中</div> </div> </body> </html>
-
文字居中
<html> <head> <style type="text/css"> .main{ height:100%; justify-content:center; align-items:center; } .box{ display:flex; justify-content:center; align-items:center; width:300px; border:1px solid #333; } </style> </head> <body> <div class="main"> <div class="box">文字垂直居中</div> </div> </body> </html>