Flex 布局基础概念与主轴与交叉轴转换方法

前端

2022-11-25 05:52:15

Flex 布局：轻松创建复杂且响应式布局的指南

什么是 Flex 布局？

Flex 布局是一种基于盒模型的布局方式，它可以让您轻松创建复杂且响应式的布局。它的优势在于可以很好地处理不同设备和屏幕尺寸，并支持 flex 项目的自动换行，非常适合创建响应式网站。

Flex 布局的基本概念

Flex 布局包含三个主要概念：

主轴（main axis）： 主轴是 flex 项目排列的方向，默认为水平方向。
交叉轴（cross axis）： 交叉轴是垂直于主轴的方向，默认为竖直方向。
flex 项目（flex item）： flex 项目是 flex 布局中的单个元素，可以是任何 HTML 元素。

如何修改主轴与交叉轴？

默认情况下，Flex 布局的主轴是水平方向，交叉轴是竖直方向。但是，可以通过修改 CSS 属性 flex-direction 来改变主轴和交叉轴的方向。

/* 使垂直方向变为主轴，水平方向变为交叉轴 */
.container {
  flex-direction: column;
}

当 flex-direction 的值为 column 时，Flex 布局的主轴就变成了竖直方向，交叉轴就变成了水平方向。

示例演示

以下示例演示了如何通过修改 flex-direction 属性来改变 Flex 布局的主轴与交叉轴方向：

HTML 代码：

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

CSS 代码：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}