CSS FLEXBOX

tags: HTML CSS relate

tags: HTML, CSS

參考影片網址

優點們:

  • 沒有 floats
  • RWD 有 且行動裝置友善
  • 定位子層更容易
  • Flex's container margin don't collapse with the margin of its contents.
  • 元素的順序可以簡單地被更改且不需要更改HTML的原始碼

Flex properties

可以這樣設定一個兩倍寬其它就照比例分下去:

使用order這個屬性後可以讓他們的順序更改:

align-item的應用

下方圖片是 flex-end

下方圖片是 flex-start

下方圖片是 center

flex-direction:column
變成垂直

justify-content的一些屬性使用

讓欄位偏左可以使用: justify-content: flex-start

讓欄位偏右可以使用: justify-content: flex-end

讓欄位置中可以使用: justify-content: center

讓欄位中間有空間但是兩邊沒有: justify-content: space-between

讓欄位兩邊以及中間都有空間: justify-content: space-around

讓物件可以換行使用: flex-wrap:wrap

Select a repo