CSS布局模型Flex

原创于 2024-11-14 14:13:15 发布 · 1.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

DIV + CSS 专栏收录该内容

12 篇文章

订阅专栏

Flex布局（Flexible Box Layout），简称Flexbox，是CSS3中的一种布局模型，它可以帮助我们更简单、灵活地设计和布局网页元素，尤其是响应式设计。

主要概念

Flexbox布局主要由两部分组成：

容器（flex container）：设置display: flex的元素。
项（flex item）：容器内部的子元素。

基本语法

.container {
  display: flex; /* 启用 Flex 布局 */
}

容器属性

这些属性用于定义容器的行为。

flex-direction：设置主轴的方向，决定子项的排列方向。
- row（默认值）：横向从左到右排列。
- row-reverse：横向从右到左排列。
- column：纵向从上到下排列。
- column-reverse：纵向从下到上排列。
```
.container {
  flex-direction: row; /* 纵向排列 */
}
```
justify-content：沿主轴对齐子项。
- flex-start：左对齐（默认）。
- flex-end：右对齐。
- center：居中对齐。
- space-between：两端对齐，项目之间留有空隙。
- space-around：项目两侧留有空隙，且空隙相等。
```
.container {
  justify-content: center; /* 主轴居中 */
}
```
align-items：沿交叉轴对齐子项。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴居中对齐。
- stretch（默认）：项目拉伸填充容器。
- baseline：项目的基线对齐。
```
.container {
  align-items: center; /* 交叉轴居中 */
}
```
align-content：多行布局时，沿交叉轴对齐行。
- flex-start：上对齐。
- flex-end：下对齐。
- center：居中对齐。
- space-between：两端对齐，行之间留有空隙。
- space-around：行之间空隙相等。
```
.container {
  align-content: center; /* 多行居中 */
}
```

项目属性

这些属性用于设置单个子项的对齐和伸缩行为。

flex-grow：定义项目的放大比例，默认为0，表示不放大。设置为1时，项目将占据多余的空间。
```
.item {
  flex-grow: 1; /* 项目占据剩余空间 */
}
```
flex-shrink：定义项目的缩小比例，默认为1，表示项目会缩小。
```
.item {
  flex-shrink: 1; /* 项目可以缩小 */
}
```
flex-basis：定义项目的初始大小，默认是auto，表示项目会根据内容决定大小。
```
.item {
  flex-basis: 200px; /* 初始大小为200px */
}
```
flex：是flex-grow、flex-shrink和flex-basis的简写，通常写法是flex: <flex-grow> <flex-shrink> <flex-basis>。
```
.item {
  flex: 1 1 200px; /* 放大比例1，缩小比例1，初始大小200px */
}
```

align-self：允许单个项目在交叉轴上覆盖align-items属性的设置。

.item {
  align-self: flex-start; /* 该项在交叉轴的起点对齐 */
}

示例：简单的Flex布局

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

<style>
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item {
    background-color: lightcoral;
    padding: 20px;
    text-align: center;
  }
</style>

在这个例子中，.container使用了Flexbox布局，项目沿主轴（默认是水平轴）分布，并且项目在交叉轴（垂直轴）上居中对齐。

高级布局示例

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

<style>
  .container {
    display: flex;
    flex-direction: column; /* 项目竖直排列 */
    justify-content: space-between; /* 两端对齐，项目之间空隙相等 */
    height: 300px; /* 设置容器高度 */
  }
  .item {
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
  }
</style>