博主信息
MArtian
博文
40
粉絲
3
評論
0
訪問量
9721
積分:0
P豆:85.5

Flex彈性盒子基礎屬性,主軸與交叉軸理解,剩余空間排列理解 - 第九期線上班20191105

2019年11月05日 15:43:14閱讀數:456博客 / MArtian / PHP線上第九班作業——第一階段

做了單行和多行元素的排序,沒有把所有執行結果都截圖出來。

  1. <style type="text/css">
  2. *{margin:0;padding:0}
  3. h3{
  4. text-align: center;
  5. font-size: 16px;
  6. width:500px;
  7. padding: 15px;
  8. }
  9. .item{
  10. background:#ffcaca;
  11. border:solid 1px #919191;
  12. box-sizing: border-box;
  13. text-align: center;
  14. padding: 50px;
  15. width:100px;
  16. }
  17. .container{
  18. width:500px;
  19. height:500px;
  20. display: flex;
  21. flex-flow:row wrap;
  22. /*justify-content: space-around; */
  23. /*justify-content: space-between;*/
  24. justify-content: space-evenly;
  25. align-items: center; /*交叉軸居中*/
  26. /*align-items:flex-start; 交叉軸起始線開始*/
  27. /*align-items:end-start; 交叉軸終止線開始*/
  28. /*align-items:stretch; 交叉軸占滿列*/
  29. border:solid 2px #7f6ded;
  30. box-sizing: border-box;
  31. }
  32. </style>
  33. <h3>單行排列</h3>
  34. <div class="container">
  35. <div class="item">1</div>
  36. <div class="item">2</div>
  37. <div class="item">3</div>
  38. <div class="item">4</div>
  39. </div>

單行排列

  1. <style type="text/css">
  2. h3{
  3. text-align: center;
  4. font-size: 16px;
  5. width:500px;
  6. padding: 15px;
  7. }
  8. .item{
  9. background:#ffcaca;
  10. border:solid 1px #919191;
  11. box-sizing: border-box;
  12. text-align: center;
  13. padding: 50px;
  14. width:100px;
  15. }
  16. .container2{
  17. width:500px;
  18. height:500px;
  19. padding: 20px;
  20. display: flex;
  21. flex-flow:column wrap;
  22. /*justify-content: space-around; */
  23. /*justify-content: space-between;*/
  24. justify-content: space-evenly;
  25. /*align-content:space-around;*/
  26. /*align-content:space-evenly;*/
  27. align-content:space-between;
  28. border:solid 2px #7f6ded;
  29. box-sizing: border-box;
  30. }
  31. </style>
  32. <h3>多行排列</h3>
  33. <div class="container2">
  34. <div class="item">1</div>
  35. <div class="item">2</div>
  36. <div class="item">3</div>
  37. <div class="item">4</div>
  38. <div class="item">5</div>
  39. <div class="item">6</div>
  40. <div class="item">7</div>
  41. <div class="item">8</div>
  42. <div class="item">9</div>
  43. </div>

"多行排列"

Flex彈性盒子布局的兩個難點是交叉軸剩余空間分配方案
交叉軸交叉軸垂直于主軸的軸線, flex-direction 控制元素的排列方向的垂直方向就是交叉軸。


剩余空間分配方案屬性圖解


space-around
space-between
space-evenly

不管是justify-content還是align-content原理都是一樣的,只是排列方向不同。

總結


1.display:flex/inline-flex的區別是,flex是塊級彈性盒子 width:100% 獨占一行,inline-flex是內聯彈性盒子寬高跟隨內容,多個inline-flex可以在同行。
2.盒子的交叉軸并不是垂直方向,取決與flex-direction屬性的值是row還是column,row 交叉軸就是垂直方向,column 交叉軸就是水平方向。
3.justify-content 可以控制主軸元素排列,無論單行還是多行都可以操作。
4.交叉軸單行多行需要分別處理,align-items 是單行排列,align-items只對多行交叉軸有效果。
5.flex-startflex-end 分別指向容器的起止和終止,row 水平方向是最左最右,row 水平方向是最上最下。
6.stretch 是交叉軸元素占滿列。

默寫3遍Flex屬性。
write1
write2

批改狀態:合格

老師批語:你的配圖,還有標注, 非常的棒

全部評論

文明上網理性發言,請遵守新聞評論服務協議

條評論
暫無評論暫無評論!
  • 3d试机号绕胆图