flex布局看这一篇就够了

Flex布局是CSS布局的一种方式，可以简化布局的设计。Flex布局提供了一种新的布局模型，使得容器内的子元素可以在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

以下是Flex布局的一些关键概念：

Flex容器：通过设置display: flex;或display: inline-flex;将一个元素指定为Flex容器。
Flex项目：Flex容器的直接子元素称为Flex项目。
主轴（main axis）：Flex项目沿其排列的方向称为主轴。默认情况下，如果容器设置了flex-direction: row;，则主轴为水平方向，否则为垂直方向。
交叉轴（cross axis）：与主轴垂直的轴称为交叉轴。
主轴对齐（justify-content）：控制Flex项目在主轴方向上的对齐方式。
交叉轴对齐（align-items）：控制Flex项目在交叉轴方向上的对齐方式。
排序方向（flex-direction）：控制Flex项目的排列方向，可以是水平或垂直。
弹性伸缩（flex-grow）：定义了Flex项目在分配多余空间时的放大比例。
弹性收缩（flex-shrink）：定义了Flex项目在空间不足时的缩小比例。
弹性基准尺寸（flex-basis）：定义了Flex项目在分配多余空间之前的初始大小。

以下是一个简单的Flex布局示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
 
.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item" style="background-color: cyan;">1</div>
  <div class="flex-item" style="background-color: magenta;">2</div>
  <div class="flex-item" style="background-color: yellow;">3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使得div成为一个Flex容器，flex-direction: row; 设置主轴方向为水平，justify-content: space-around; 和 align-items: center; 分别设置主轴和交叉轴上的对齐方式。.flex-item 类定义了Flex项目的尺寸和背景颜色。

flex布局看这一篇就够了

评论已关闭

推荐阅读