CSS 属性

CSS flexbox 是 CSS 中的一种布局模型，它提供了一种高效灵活的方式来安排和分配容器内项目之间的空间。它在容器内以水平或垂直的单一维度排列元素。

Flexbox 沿单一维度组织容器内的元素，可以水平或垂直对齐。

本章将涵盖用于管理沿主轴和交叉轴的元素之间的定位、对齐和间隙的所有属性。

下图演示了 Flexbox 布局以供参考:

CSS Flexbox layout

CSS Flexbox 布局

通过使用 Flexbox-container 类定义父容器来创建 Flexbox 布局。

让我们看一个例子 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container>div {
      background-color: yellow;
      margin: 10px;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

CSS display: flex

Flexbox 布局使用 display: flex 属性来对齐和分布布局容器内的元素。

让我们看一个例子 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container>div {
      background-color: yellow;
      margin: 10px;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

CSS display: inline-flex

Flexbox 布局还可以使用 display: inline-flex 属性来创建内联级 Flex 容器，允许元素

让我们看一个例子 -

<html>
<head>
<style>
   .flex-container {
      display: inline-flex;
      background-color: green;
   }
   .flex-container>div {
      background-color: yellow;
      margin: 10px;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

CSS Flexbox 容器: 相关属性

Flex 容器的一些属性列出如下 -

属性值
flex-direction设置 Flex 项目的 Flex 方向。
flex-wrap设置 Flex 项目是否应换行到下一行
justify-content设置 Flex 项目沿主轴的对齐方式。
align-items设置对齐方式沿横轴的弹性项目数。
align-content设置 Flex 容器内 Flex 线的对齐方式和间距。
flex-flow设置 flex-direction 和 flex-wrap 属性。

CSS Flexbox项目: 相关属性

弹性项目的一些属性如下 -

属性值
flex-grow设置 Flex 项目在 Flex 容器内增长.
flex-shrink集Flex 项目缩小大小以适应可用空间。
flex-basis设置 Flex 项目的初始大小。
flex简写属性，组合了三个与 flex 相关的属性:flex-grow、flex-shrink 和 flex-basis。
align-self设置特定 Flex 项目沿横轴的对齐方式。