iT邦幫忙

1

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

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

今天就讓我們淺談Flexbox

https://ithelp.ithome.com.tw/upload/images/20200413/20124879ml4SNeLDeh.png
容我用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-contentalign-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>

https://ithelp.ithome.com.tw/upload/images/20200413/20124879m4PzeKOzr2.png

以上皆參考自w3cschool文章


尚未有邦友留言

立即登入留言