點燈坊

學而時習之,不亦悅乎

CSS Flexbox 之 Cross Axis 與 Wrap 對齊

Sam Xiao's Avatar 2019-07-12

當 Cross Axis 與 nowarp 搭配時,需搭配 align-items 設定 alignment;若 Cross Axis 與 wrap 搭配時,則要使用 align-content

Version

macOS Mojave 10.14.5
WebStorm 2019.1.3
Chrome 75.0.3770.100
CSS 3

HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">
    <h1 class="item">1</h1>
    <h1 class="item">2</h1>
    <h1 class="item">3</h1>
    <h1 class="item">4</h1>
    <h1 class="item">5</h1>
    <h1 class="item">6</h1>
  </div>
</body>
</html>

<div> 下有 6 個 <h1>

CSS

style.css

.box {
  display: flex;
  flex-wrap: wrap;
  width: 900px;
  height: 300px;
}

.item {
  background: #faa;
  flex-basis: 300px;
  min-height: 50px;
  margin: 5px;
}

第 1 行

.box {
  display: flex;
  flex-wrap: wrap;
  width: 900px;
  height: 300px;
}

displayflex,表示使用 flexbox。

flex-direction 沒寫預設為 row,表示 main axis 為 row,cross axis 為 column

重點在 flex-wrapwrap,表示 item 超過 container 寬度時,將換行顯示。

align-content 必須在 wrap 下才有效。

第 8 行

.item {
  background: #faa;
  flex-basis: 300px;
  min-height: 50px;
  margin: 5px;
}

關鍵在 min-height: 50px,若設定為 height,則 align-content: stretch 將無效,因為已經被限定為 50px 無法 stretch。

Stretch

content000

6 個 item 在 cross axis 方向均分 container。

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

align-content 預設為 stretch,也就是在 cross axis 方向皆 stretch 均分 container 剩餘高度。

Flex-start

content001

Container 內所有 item 在 cross axis 方向皆 靠上對齊

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

align-contentflex-start,因為 cross axis 為 column,為 由上至下,相當於 靠上對齊

Flex-end

content002

Container 內所有 item 在 cross axis 方向皆 靠下對齊

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

align-contentflex-end,因為 cross axis 為 column,為 由上至下,相當於 靠下對齊

Center

content003

Container 內所有 item 在 cross axis 方向皆 置中對齊

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

align-itemscenter,因為 cross axis 為 column,相當於 垂直置中

Space-between

content004

Container 內 item 與 item 間隔相等。

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

align-contentspace-between,表示間隔相等,且平分 container 剩餘高度。

Space-around

content005

Container 內 item 與 item 間隔相等,且首尾 item 也有間隔。

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

align-contentspace-around,表示間隔相等,平分 container 剩餘高度,且首尾間隔高度為一般間隔一半。

Space-evenly

content006

Container 內 item 與 item 間隔相等,且首尾 item 間隔也相等。

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}

align-contentspace-evenly,表示間隔相等,平分 container 剩餘高度,且首尾間隔高度也相等。

Conclusion

  • align-content 只適用於 cross axis 且 flex-wrap: wrap,在 nowrap 無效
  • align-items 預設為 stretch,會自動 stretch 瓜分 container 剩餘高 (寬) 度
  • align-contentflex-startflex-endcenterspace-betweenspace-aroundspace-evenlyalign-items 相同,唯必須搭配 flex-wrap: wrap

Reference

MDN, align-content