en/css/flexbox-guide

Flexbox 是 CSS3 中的一个强大的布局工具，它允许开发者以更简单的方式创建复杂的页面布局。以下是关于 Flexbox 的一些基础知识和使用方法。

Flexbox 简介

Flexbox 是一种用于布局的 CSS3 模型，它允许开发者以更灵活和高效的方式排列容器中的项目。在 Flexbox 模型中，容器被定义为弹性容器（flex container），而容器内的项目则被定义为弹性项目（flex items）。

基本概念

• 弹性容器：设置 display: flex; 或 display: inline-flex; 的元素会变成弹性容器。
• 弹性项目：弹性容器内的直接子元素默认会成为弹性项目。
• 主轴（Main Axis）：弹性容器的主轴决定了弹性项目的放置方向，默认为水平方向。
• 交叉轴（Cross Axis）：垂直于主轴的轴称为交叉轴。

属性介绍

• flex-direction：设置主轴的方向。
• flex-wrap：设置弹性项目是否可以换行。
• justify-content：设置主轴上的项目对齐方式。
• align-items：设置交叉轴上的项目对齐方式。
• align-content：设置多行交叉轴上的项目对齐方式。

实例

假设我们要创建一个两列布局，左侧显示图片，右侧显示文本。

<div class="flex-container">
  <div class="flex-item">
    <img src="/en/css/flexbox-guide/example_image.jpg" alt="示例图片">
  </div>
  <div class="flex-item">
    这里是关于 Flexbox 的文本内容。
  </div>
</div>

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

以上代码将创建一个两列布局，图片和文本分别在两列中显示。

扩展阅读

更多关于 Flexbox 的内容，请访问 Flexbox 教程。

<center><img src="https://cloud-image.ullrai.com/q/Flexbox_Overview/" alt="Flexbox 介绍"/></center>