學習筆記-CSS Flex網頁排版

FLEX 外層 container 屬性

Class 裡面有兩個樣式, 則兩個樣式都會使用到

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

.container {
  display: flex;
  width: 500px;
  background: #004466;
  margin: 0 auto;
}
.item {
  background: #00ffa2;
  color: #004466;
  text-align: center;
  font-size: 36px;
  margin-right: 10px;
  margin-left: 10px;
}
.item1 {
  width: 150px;
  height: 150px;
}
.item2 {
  height: 200p;
}
.item3 {
  height: 300p;
}

display: flex 要寫在外層(container), 可以讓區塊元素並排展現

會依照 container 設定的寬度, 讓裡面 item 根據比例自動調整

display: flex 有自適的功能, 高度是預設等高, 當 item2 有限制高度的時候，item3 就會 follow item2 的高度, 但 item1 自己有限制高度, 就會維持自己標示的高度展示

FLEX direction 主軸介紹

Flex-direction: row (從左到右)
Flex-direction: row-reverse (從右到左)
Flex-direction: column (從上到下)
Flex-direction: column-reverse (從下到上)

FLEX 六角線上模擬器: https://codepen.io/peiqun/pen/WYzzYX

justify-content 主軸對齊方式

flex-wrap 決定換行屬性

flex-wrap 決定換行屬性

align-items 交錯軸對齊方式

交錯軸是指垂直呈現

種類有這些: