css/flexbox_advanced

Flexbox高级用法指南

Flexbox 是 CSS3 中的一个强大的布局工具，它允许开发者以更简单的方式创建复杂的布局。以下是一些高级用法，帮助你更深入地理解和使用 Flexbox。

布局方向

Flexbox 默认的主轴是水平方向，但可以通过设置 flex-direction 属性来改变布局方向。

row: 默认值，主轴为水平方向。
row-reverse: 主轴为水平方向，但从右到左排列。
column: 主轴为垂直方向。
column-reverse: 主轴为垂直方向，但从下到上排列。

对齐方式

Flexbox 提供了多种对齐方式，可以用于对齐容器内的元素。

justify-content: 水平对齐方式。
- flex-start: 元素靠左对齐。
- flex-end: 元素靠右对齐。
- center: 元素居中对齐。
- space-between: 元素平均分布，两端对齐。
- space-around: 元素平均分布，每个元素周围有相同的空间。
align-items: 垂直对齐方式。
- flex-start: 元素靠顶部对齐。
- flex-end: 元素靠底部对齐。
- center: 元素居中对齐。
- stretch: 元素拉伸至容器高度。
align-content: 在多行布局中对齐。

响应式布局

Flexbox 可以轻松实现响应式布局，通过媒体查询和 flex-grow、flex-shrink、flex-basis 属性来控制元素的大小。

flex-grow: 定义元素如何在不改变宽高比的情况下增长。
flex-shrink: 定义元素如何在不改变宽高比的情况下缩小。
flex-basis: 定义元素的初始大小。

实例

以下是一个简单的 Flexbox 实例：

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

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

更多 Flexbox 相关内容，请访问Flexbox 布局教程。