flex 常见的布局方式

Flexbox 是一种用于 CSS 布局的强大工具，可以帮助你轻松地创建灵活的布局。以下是一些常见的 flexbox 用法和属性：

1. 基本用法

HTML 结构

html

复制代码

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

CSS 样式

css

复制代码

.container { display: flex; /* 设置主轴方向，默认为 row（横向） */ flex-direction: row; /* 设置子元素在主轴上的对齐方式 */ justify-content: flex-start; /* 设置子元素在交叉轴上的对齐方式 */ align-items: stretch; } .item { flex: 1; /* 子元素平分容器的剩余空间 */ }

2. 主轴方向 (flex-direction)

水平排列 (默认)

css

复制代码

.container { display: flex; flex-direction: row; /* 横向排列 */ }

垂直排列

css

复制代码

.container { display: flex; flex-direction: column; /* 纵向排列 */ }

3. 主轴对齐方式 (justify-content)

左对齐 (默认)

css

复制代码

.container { display: flex; justify-content: flex-start; }

右对齐

css

复制代码

.container { display: flex; justify-content: flex-end; }

居中对齐

css

复制代码

.container { display: flex; justify-content: center; }

等间距对齐

css

复制代码

.container { display: flex; justify-content: space-between; /* 两端对齐，元素之间的间距相等 */ }

平均分布对齐

css

复制代码

.container { display: flex; justify-content: space-around; /* 每个元素两侧的间距相等 */ }

4. 交叉轴对齐方式 (align-items)

顶部对齐

css

复制代码

.container { display: flex; align-items: flex-start; }

底部对齐

css

复制代码

.container { display: flex; align-items: flex-end; }

居中对齐

css

复制代码

.container { display: flex; align-items: center; }

拉伸对齐 (默认)

css

复制代码

.container { display: flex; align-items: stretch; }

5. 弹性子元素 (flex)

等分剩余空间

css

复制代码

.item { flex: 1; }

不同的弹性比例

css

复制代码

.item1 { flex: 1; /* 占剩余空间的 1 份 */ } .item2 { flex: 2; /* 占剩余空间的 2 份 */ }

6. 多行布局 (flex-wrap)

不换行 (默认)

css

复制代码

.container { display: flex; flex-wrap: nowrap; }

自动换行

css

复制代码

.container { display: flex; flex-wrap: wrap; }

逆序换行

css

复制代码

.container { display: flex; flex-wrap: wrap-reverse; }

示例：创建一个弹性布局

HTML 结构

html

复制代码

<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div>

CSS 样式

css

复制代码

.container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height: 200px; /* 容器的高度 */ border: 1px solid #000; } .item { flex: 1 1 100px; /* 设置弹性比例和最小宽度 */ margin: 10px; padding: 20px; background-color: lightblue; text-align: center; }

通过使用 flexbox，你可以创建复杂且响应式的布局，而不需要浮动或定位技巧。以上是 flexbox 的一些基本用法和示例，你可以根据需求进一步调整和组合这些属性。

下面是一个包含各种布局的 flexbox demo，它展示了如何使用 flexbox 创建不同的布局模式。这个 demo 包括了水平排列、垂直排列、居中对齐、等间距对齐和自动换行布局。

HTML 结构

html

复制代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Demo</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Flexbox Layout Demo</h1> <section> <h2>Horizontal Layout</h2> <div class="container horizontal"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> </section> <section> <h2>Vertical Layout</h2> <div class="container vertical"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> </section> <section> <h2>Centered Layout</h2> <div class="container centered"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> </section> <section> <h2>Space Between Layout</h2> <div class="container space-between"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> </section> <section> <h2>Wrapped Layout</h2> <div class="container wrapped"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> </section> </body> </html>

CSS 样式

css

复制代码

/* styles.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; } h1, h2 { text-align: center; } .container { border: 1px solid #ccc; margin: 20px auto; padding: 10px; display: flex; gap: 10px; background-color: #fff; } .item { background-color: lightblue; padding: 20px; text-align: center; border: 1px solid #ddd; flex: 1; } /* Horizontal Layout */ .horizontal { flex-direction: row; } /* Vertical Layout */ .vertical { flex-direction: column; } /* Centered Layout */ .centered { justify-content: center; align-items: center; height: 150px; } /* Space Between Layout */ .space-between { justify-content: space-between; } /* Wrapped Layout */ .wrapped { flex-wrap: wrap; height: auto; }

解释

Horizontal Layout:
- 使用 flex-direction: row 来创建水平排列的布局。
Vertical Layout:
- 使用 flex-direction: column 来创建垂直排列的布局。
Centered Layout:
- 使用 justify-content: center 和 align-items: center 来创建居中对齐的布局。
Space Between Layout:
- 使用 justify-content: space-between 来创建等间距对齐的布局。
Wrapped Layout:
- 使用 flex-wrap: wrap 来创建自动换行的布局。