鼠年全馬鐵人挑戰 WEEK 11: 水平垂直置中、排版黑魔法 CSS-Flex

w3hexschool 鼠年全馬鐵人挑戰六角學院前端新手村 css教學

jason06286 2020-04-26 18:12:42 ‧ 5966 瀏覽

分享至

在還沒認識Flex前我的水平垂直置中招式，永遠都只有這幾招，line-height+margin auto或用postion來設定，但每次遇到的狀況還不一定能用以上的方式解決！ (ఠ్ఠ ˓̭ ఠ్ఠ)，直到我認識到了Flex，才瞭解什麼叫做相見恨晚！

今天就讓我們淺談Flexbox

容我用w3cschool的圖，以我的瞭解直白的做解釋

在圖中最外面用了一層 Flex Container所包覆著，要使用FlexBox之前，我們需要給定一個區塊，讓這個區塊內的元件具有 Flex的效果。

display:flex

圖中主要被 Main以及Cross所劃分。：Main就是X軸，而Cross就是Y軸。至於Start、End，就是開始以及結束,主要是判斷方向。

justify-content
//根據Main
align-items
//根據Cross
flex-direction
//根據Start、End

所以你可以把FlexBox解釋成：在一個容器當中，我們將每一個區塊都視為一個 Item
其中每一個Item的擺放位置，透過 Main、Cross這兩條線來去劃分。將我們的區塊放入我們想要的位置。

flex-direction

可點擊標題瞭解

row：預設值，由左到右，從上到下
row-reverse：與 row 相反
column：從上到下，再由左到右
column-reverse：與 column 相反

justify-content

可點擊標題瞭解

flex-start：預設值，對齊最左邊的 main start
flex-end：對齊最左邊的 main end
center：水平置中
space-between：平均分配內容元素，左右元素將會與 main start 和 main end 貼齊
space-around：平均分配內容元素，間距也是平均分配

align-items

可點擊標題瞭解

flex-start：對齊最上面的 cross start
flex-end：對齊最下面的 cross end
center：垂直置中
stretch：預設值，將內容元素全部撐開至 Flexbox 的高度
baseline：以所有內容元素的基線作為對齊標準

所以我們就能利用`justify-content`、`align-items`使圖片置中了。

<body>
  <div class="container">
  <h1>媽！我置中了</h1>
  </div>
  <style>
    .container{
      width: 400px;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #000000;
    }
    h1{
      color: navy;
    } 
  </style>
</body>