介紹 Flex Container 外容器屬性

屬性

• display
• flex-flow
  • flex-direction
  • flex-wrap
• justify-content
• align-items
• align-content
• gap, row-gap, column-gap

本篇將會介紹到 flex-wrap

display

display: flex;

display: inline-flex;

通過將 display 屬性設置為flex 或是 inline-flex，元素就可以變成 flex container。

2 者有何不一樣?

可以看到使用 display: flex，如同 flex-container 使用 display: block 一樣，寬度會占據父元素的寬度。
使用 display: inline-flex，如同 flex-container 使用 display: inline-block，寬度為子元素的最大寬度。

簡單來說，想要讓 2 個 flex container 使用上下排列，可以使用 display: flex。如果寬度夠的狀況下，想使 flex container 使用左右排列，可以使用 display: inline-flex。

CodePen 範例

  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
  </div>

  <div class="inline-flex">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
  </div>

  <div class="flex">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
  </div>

.inline-flex {
  display: inline-flex;
  /* debug only */
  border: 5px solid red;
}

.flex {
  display: flex;
  /* debug only */
  border: 5px solid green;

}

p {
  color: red;
}

/* debug only */
div.inline-flex > *,
div.flex > * {
  padding: 20px;
  background-color: aqua;
}

flex-flow

flex flow 是 flex-direction 和 flex-wrap 的簡寫。

flex-flow: column wrap 表示 flex-direction: column + flex-wrap: wrap 的縮寫。

flex-direction

定義 main axis 的方向，再加上 flex item 的排序會依據 main axis 的方向，所以跟者影響 flex item 的排序。

分成以下的屬性。

• row
  

main axis 為從左到右的水平線。
cross axis 為從上到下的水平線。

• row-reverse
  可以看到 1, 2, 3 呈現由右到左排列
  
  main axis 為從右到左的水平線。
  cross axis 為從上到下的水平線。

• column

main axis 為從上到下的垂直線。
cross axis 為從左到右的水平線。

• column-reverse

main axis 為從下到上的垂直線。
cross axis 為從左到右的水平線。

flex-wrap

如果 flex item 的數量較多時，必要時可以使 flex item 換行。

範例

以 flex-direction: row 作為範例。當 flex container 的flex-direction: row，flex item 的排序方式是由左到右，由上到下。

CodePen 範例

• nowrap
  預設值，所有的 flex item 全部擠在同一列，不換行，如太過壅擠，會調整各個 flex item 的 width。

可以看到 box model，每一個 flex item 的 width已經縮水成 77.8px

• wrap
  flex item 的 width 一定都會是 100px 不會縮水，但是放不下的 flex item 會被擠到下一行。

• wrap-reverse
wrap 是由左到右，由上到下做排序。但是 wrap-reverse是 cross axis 相反，表示是由左到右，由下到上做排序。