CSS Flex布局详解CSS Flex 布局（Flexible Box Layout），通常简称为 Flexbox，是

概念

CSS Flex 布局（Flexible Box Layout），通常简称为 Flexbox，是一种用于在 CSS 中创建灵活的一维布局的方式。它旨在提供一种更有效的方式来进行页面元素的布局、对齐和分配空间，尤其是当容器中的元素大小不确定或者需要动态适应不同屏幕尺寸和设备时。

以下是 Flex 布局的一些主要概念和特性：

一、容器和项目

容器（Flex Container） ：
- 应用了 display: flex 或 display: inline-flex 的元素就是一个 Flex 容器。
- 它定义了一个 Flex 布局的范围，其内部的子元素将成为 Flex 项目并遵循 Flex 布局的规则。
- 例如：

    .flex-container {
       display: flex;
     }

项目（Flex Item） ：
- Flex 容器内的直接子元素就是 Flex 项目。
- 这些项目会根据 Flex 布局的规则在容器内进行排列和调整。
- 例如：

     <div class="flex-container">
       <div class="item">项目 1</div>
       <div class="item">项目 2</div>
     </div>

二、主轴（Main Axis）和交叉轴（Cross Axis）

主轴：
- 这是 Flex 项目在 Flex 容器中排列的主要方向。
- 默认情况下，在水平方向的 Flex 容器中，主轴是从左到右；在垂直方向的 Flex 容器中，主轴是从上到下。
- 可以通过 flex-direction 属性来改变主轴的方向，例如 row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。
交叉轴：
- 与主轴垂直的方向就是交叉轴。
- 例如在水平主轴的情况下，交叉轴就是垂直方向；在垂直主轴的情况下，交叉轴就是水平方向。

三、对齐方式

主轴上的对齐（justify-content） ：
- 用于控制 Flex 项目在主轴上的对齐方式。
- 可选值包括：
  - flex-start：项目在主轴的起点对齐（默认值）。
  - flex-end：项目在主轴的终点对齐。
  - center：项目在主轴上居中对齐。
  - space-between：项目在主轴上两端对齐，项目之间的间隔相等。
  - space-around：项目在主轴上分散排列，每个项目两侧的间隔相等。
- 例如：

    .flex-container {
       justify-content: center;
     }

交叉轴上的对齐（align-items 和 align-content） ：
- align-items：用于控制单个 Flex 项目在交叉轴上的对齐方式。
  - 可选值包括 flex-start、flex-end、center、baseline（项目的第一行文字的基线对齐）、stretch（默认值，如果项目未设置高度或高度为 auto，则项目会拉伸以填满交叉轴）。
- align-content：当 Flex 容器有多行项目时，用于控制多行项目在交叉轴上的对齐方式，类似于 justify-content 对主轴的作用。
  - 可选值与 justify-content 类似。

四、弹性伸缩（flex 属性）

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写属性，用于定义 Flex 项目的弹性。
- flex-grow：定义项目的放大比例，当容器有多余空间时，项目按照此比例进行放大。
- flex-shrink：定义项目的缩小比例，当容器空间不足时，项目按照此比例进行缩小。
- flex-basis：定义项目在分配空间之前的初始大小。
- 例如：

    .item {
       flex: 1 1 200px; /* 放大比例为 1，缩小比例为 1，初始大小为 200px */
     }

Flex 布局极大地简化了网页布局的复杂性，使得开发者能够更轻松地创建响应式和适应性强的页面布局。了解了以上flex属性能够更有针对性的解决元素没有按预期显示的情况