2 篇文章含有標籤「Flexbox」

1. Flexbox 簡介

Flexbox（Flexible Box Layout）是一種 CSS3 佈局模式，專門用來設計一維的彈性佈局，適用於水平或垂直排列元素，使網頁排版更加靈活且易於維護。

1.1 為何使用 Flexbox？

彈性調整：元素可根據可用空間動態調整大小。
簡化佈局：減少對 float、inline-block 及 position 依賴。
更好的對齊方式：內建強大的對齊與分佈控制。

2. Flexbox 基本概念

Flexbox 佈局的核心概念是 容器（container） 和 子項目（items）。

.container {
  display: flex;
}

一旦對容器使用 display: flex，其內部的子元素將自動變成 Flex 子項目，並受 Flex 佈局影響。

3. Flex 容器屬性

3.1 `flex-direction`

決定主軸（main axis）方向。

.container {
  flex-direction: row; /* 預設值，水平排列 */
  flex-direction: row-reverse; /* 反向水平排列 */
  flex-direction: column; /* 垂直排列 */
  flex-direction: column-reverse; /* 反向垂直排列 */
}

3.2 `justify-content`

控制子項目在主軸上的對齊方式。

.container {
  justify-content: flex-start; /* 預設，從左到右排列 */
  justify-content: flex-end; /* 靠右排列 */
  justify-content: center; /* 置中排列 */
  justify-content: space-between; /* 兩端對齊，間距平均分布 */
  justify-content: space-around; /* 子項目兩側有相等的間距 */
  justify-content: space-evenly; /* 所有間距均等 */
}

3.3 `align-items`

控制子項目在交叉軸（cross axis）上的對齊方式。

.container {
  align-items: flex-start; /* 靠起始位置對齊 */
  align-items: flex-end; /* 靠末端對齊 */
  align-items: center; /* 垂直置中對齊 */
  align-items: stretch; /* 預設，撐滿高度 */
  align-items: baseline; /* 依據文本基線對齊 */
}

3.4 `align-content`

適用於多行佈局，控制多行之間的間距。

.container {
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

4. Flex 子項目屬性

4.1 `flex-grow`

設定子項目如何分配多餘空間。

.item {
  flex-grow: 1; /* 所有子項目平均分配空間 */
}

4.2 `flex-shrink`

控制子項目如何縮小。

.item {
  flex-shrink: 0; /* 防止縮小 */
}

4.3 `flex-basis`

設定子項目的初始大小。

.item {
  flex-basis: 200px; /* 設定初始寬度或高度 */
}

4.4 `flex`

綜合 flex-grow、flex-shrink 和 flex-basis。

.item {
  flex: 1 1 100px; /* grow, shrink, basis */
}

5. Flexbox 常見佈局範例

5.1 水平置中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

5.2 等寬三欄佈局

.container {
  display: flex;
}
.item {
  flex: 1;
}

5.3 兩欄固定 + 自適應

.container {
  display: flex;
}
.sidebar {
  flex: 0 0 200px; /* 固定 200px */
}
.content {
  flex: 1; /* 佔滿剩餘空間 */
}

6. 結論

Flexbox 是一種強大且直觀的 CSS 佈局方式，能夠解決傳統排版難題，使開發者能夠輕鬆實現響應式佈局與對齊方式。本篇筆記介紹了 Flexbox 的基本屬性及常見佈局範例，進一步學習可以研究 CSS Grid 和更進階的排版技巧。

Flexbox Froggy 入門教學筆記 | 學習筆記

2024年7月11日 · 閱讀時間約 8 分鐘

kdchang

Flexbox（Flexible Box Layout）是一種 CSS3 佈局模式，專門用來設計一維的彈性佈局，適用於水平或垂直排列元素，使網頁排版更加靈活且易於維護。

Flexbox Froggy 透過小青蛙過河遊戲化方式去介紹 Flexbox 使用方式：

Level 1

Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:

flex-start: Items align to the left side of the container. flex-end: Items align to the right side of the container. center: Items align at the center of the container. space-between: Items display with equal spacing between them. space-around: Items display with equal spacing around them. For example, justify-content: flex-end; will move the frog to the right.

#pond {
  display: flex;
  justify-content: flex-end;
}

Level 2

Use justify-content again to help these frogs get to their lilypads. Remember that this CSS property aligns items horizontally and accepts the following values:

flex-start: Items align to the left side of the container. flex-end: Items align to the right side of the container. center: Items align at the center of the container. space-between: Items display with equal spacing between them. space-around: Items display with equal spacing around them.

#pond {
  display: flex;
  justify-content: center;
}

Level 3

Help all three frogs find their lilypads just by using justify-content. This time, the lilypads have lots of space all around them.

If you find yourself forgetting the possible values for a property, you can click on the property name to view them. Try clicking on justify-content.

#pond {
  display: flex;
  justify-content: space-around;
}

Level 4

Now the lilypads on the edges have drifted to the shore, increasing the space between them. Use justify-content. This time, the lilypads have equal spacing between them.

#pond {
  display: flex;
  justify-content: space-between;
}

Level 5

Now use align-items to help the frogs get to the bottom of the pond. This CSS property aligns items vertically and accepts the following values:

flex-start: Items align to the top of the container. flex-end: Items align to the bottom of the container. center: Items align at the vertical center of the container. baseline: Items display at the baseline of the container. stretch: Items are stretched to fit the container.

#pond {
  display: flex;
  align-items: flex-end;
}

Level 6

Lead the frog to the center of the pond using a combination of justify-content and align-items.

#pond {
  display: flex;
  justify-content: center;
  align-items: center;
}

Level 7

The frogs need to cross the pond again, this time for some lilypads with plenty of space around them. Use a combination of justify-content and align-items.

#pond {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

Level 8

The frogs need to get in the same order as their lilypads using flex-direction. This CSS property defines the direction items are placed in the container, and accepts the following values:

row: Items are placed the same as the text direction. row-reverse: Items are placed opposite to the text direction. column: Items are placed top to bottom. column-reverse: Items are placed bottom to top.

#pond {
  display: flex;
  flex-direction: row-reverse;
}

Level 9

Help the frogs find their column of lilypads using flex-direction. This CSS property defines the direction items are placed in the container, and accepts the following values:

#pond {
  display: flex;
  flex-direction: column;
}

Level 10

Help the frogs get to their own lilypads. Although they seem close, it will take both flex-direction and justify-content to get them there.

Notice that when you set the direction to a reversed row or column, start and end are also reversed.

#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

Level 11

Help the frogs find their lilypads using flex-direction and justify-content.

Notice that when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.

#pond {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

Level 12

Help the frogs find their lilypads using flex-direction and justify-content.

#pond {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
}

Level 13

Help the frogs find their lilypads using flex-direction, justify-content, and align-items.

#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;
}

Level 14

Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).

Use the order property to reorder the frogs according to their lilypads.

#pond {
  display: flex;
}

.yellow {
  order: 1;
}

Level 15

Use the order property to send the red frog to his lilypad.

#pond {
  display: flex;
}

.red {
  order: -1;
}

Level 16

Another property you can apply to individual items is align-self. This property accepts the same values as align-items and its value for the specific item.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  align-self: flex-end;
}

Level 17

Combine order with align-self to help the frogs to their destinations.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  order: 1;
  align-self: flex-end;
}

Level 18

Oh no! The frogs are all squeezed onto a single row of lilypads. Spread them out using the flex-wrap property, which accepts the following values:

nowrap: Every item is fit to a single line. wrap: Items wrap around to additional lines. wrap-reverse: Items wrap around to additional lines in reverse.

#pond {
  display: flex;
  flex-wrap: wrap;
}

Level 19

Help this army of frogs form three orderly columns using a combination of flex-direction and flex-wrap.

#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Level 20

The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space.

For example, you can use flex-flow: row wrap to set rows and wrap them.

Try using flex-flow to repeat the previous level.

#pond {
  display: flex;
  flex-flow: column wrap
}

Level 21

The frogs are spread all over the pond, but the lilypads are bunched at the top. You can use align-content to set how multiple lines are spaced apart from each other. This property takes the following values:

flex-start: Lines are packed at the top of the container. flex-end: Lines are packed at the bottom of the container. center: Lines are packed at the vertical center of the container. space-between: Lines display with equal spacing between them. space-around: Lines display with equal spacing around them. stretch: Lines are stretched to fit the container. This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

Level 22

Now the current has bunched the lilypads at the bottom. Use align-content to guide the frogs there.

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

Level 23

The frogs have had a party, but it is time to go home. Use a combination of flex-direction and align-content to get them to their lilypads.

#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-content: center;
}