css面试题之Flex布局
生活随笔
收集整理的這篇文章主要介紹了
css面试题之Flex布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Flex布局
?
1、分清主軸和交叉軸
flex-direction 為 row 時，主軸是橫向的，相反的為 column 時，主軸是縱向的。
?
2、搞清楚6個參數的含義
- flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap: no-wrap | wrap | wra-reverse;
- flex-flow: flex-direction || flex-wrap;
- justify-content: flex-start | flex-end | center | space-between | space-around;?(主軸上的排列樣式)
- align-items:stretch |?flex-start | flex-end |?center | baseline;（交叉軸上的排列樣式）
- align-content: stretch | flex-start | flex-end | center | space-between | space-around; (多條主軸的對齊方式， 比較少使用到）
3、DEMO?
改變參數的值，來理解每個參數的含義，更加有助于理解和使用。
<!Doctype html> <html><head><title>Flex布局</title></head><style>body{width:100%;background: #f0f;min-width:800px;}.content{width: 94%;padding:3%;}.box{width:100%;display: flex;flex-direction: row;justify-content: space-around;align-items:center ;align-content: center;flex-wrap: wrap;}.item{width:46%;height:200px;padding:1%;}.small-box{background:pink;width:100%;height:100%;}</style><body><div class="content"><div class="box"><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div></div></div></body> </html>?
總結
以上是生活随笔為你收集整理的css面试题之Flex布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 10 文件无效_新手必看！10个CAD常
- 下一篇： MATLAB —— 绘图