css3-flex布局：基础使用 / Flexbox布局

一、理解flex

二、理解Flex布局（又称Flexbox布局）

Flex布局（又称Flexbox布局）是一种基于Web的CSS3布局模式，其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项目，使得这些项目能够按照一定规则相互排列，并且自动适应它们所处的容器环境。

在Flex布局中，父容器成为“flex container”，子元素成为“flex item”。Flex容器有两个重要的属性：flex-direction和justify-content。flex-direction主要用来决定flex item在主轴上的排列方向，而justify-content则用来对flex item进行主轴方向上的对齐。

除了这些基本属性之外，Flex布局还具有许多其他的属性，例如：align-items、align-content、flex-wrap、order、flex-grow、flex-shrink等。这些属性用来定义flex item在交叉轴和主轴上的排序方式以及它们在父容器中所占的空间大小。

flex布局是一种比较高级的网页排版技术，它能够帮助开发者轻松地实现复杂的网页布局效果，并且具有灵活和响应式的特点。

三、设置了 flex 布局后，以下属性将失效

四、Flex布局有以下核心概念

4.1、Flex容器（Flex Container）：应用了 Flex 布局的元素，称为 Flex 容器。其作用是定义 Flex 项目所在的容器，使 Flex 项目能够进行弹性布局。

4.2、Flex项目（Flex Item）：Flex 容器中的子元素称为 Flex 项目（Flex Item），每个 Flex 项目都具有弹性盒的属性。同时，它们也受到 Flex 容器的限制，如放置的方向、排列顺序等。

4.3、Flex轴（Main Axis）：Flex 容器主要的放置方向即为 Flex 轴。在该轴上，Flex 容器中的 Flex 项目会被依次排列。

4.4、Flex交叉轴（Cross Axis）：与 Flex 轴垂直的轴称为 Flex 的交叉轴。在该轴上，Flex 项目所占据的空间是有限制的，具体大小由 Flex 容器的属性决定。

4.5、主轴方向属性（justify-content）：该属性用于控制 Flex 项目在 Flex 轴上的对齐方式。它可以让 Flex 项目在主轴方向上看起来更加美观，通常被用于实现水平对齐或垂直对齐。

4.6、交叉轴方向属性（align-items）：该属性用于控制 Flex 项目在交叉轴上的对齐方式。它可以让 Flex 项目在交叉轴方向上看起来更加美观，通常被用于实现水平对齐或垂直对齐。

4.7、弹性元素属性（flex）：该属性用于控制 Flex 项目如何分配 Flex 容器中可用空间。该属性的值决定了 Flex 项目的伸缩性，它能够让 Flex 项目在 Flex 容器中的尺寸发生变化，以适应不同的屏幕尺寸或者容器大小。

五、Flex容器

Flex容器是包含Flex项目的父级元素，通过设置该元素的display属性为flex或inline-flex，即可创建一个Flex容器。

六、Flex项目

Flex项目是Flex容器中的子元素，通过设置该元素的flex属性，即可使其成为一个Flex项目。

七、DEMO / vue3.3 + ts

7.1、水平、垂直 居中

<template>
  <div class="container">
    <!-- 水平、垂直 居中 -->
    <div class="flex">
      <div class="flex_item"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.container{
  .flex{
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    width: 200px;
    height: 200px;
    background: #ff0000;
    &_item{
      width: 50px;
      height: 50px;
      background: #b3de1b;
    }
  }
}
</style>

7.2、flex-shrink

<template>
  <div class="container">
    <div class="flex">
      <div class="flex_item">1</div>
      <div class="flex_item">2</div>
      <div class="flex_item">3</div>
      <div class="flex_item">4</div>
      <div class="flex_item">5</div>
      <div class="flex_item">6</div>
      <div class="flex_item">7</div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.container{
  .flex{
    display: flex;
    width: 200px;
    height: 200px;
    background: #ff0000;
    &_item{
      width: 50px;
      height: 50px;
      background: #b3de1b;
      flex-shrink: 0; // 表示Flex项目在空间不足时的缩小比例。flex-shrink的默认值为1，数值越大，缩小比例越多，设置为 0 不缩放 。
    }
  }
}
</style>

7.3、flex-wrap: wrap; / 换行

7.4、 align-content: flex-start; / 多行项目对齐于交叉轴的起始位置

7.5、flex 布局，最后一个元素居右

margin-left: auto;

7.6、flex布局，设置间距

gap: 10rpx;

7.7、flex: initial;

display:flex;

三个元素，中间一个name为空字符串

我们期望空字符串，中间不展示

flex: initial;

 效果实现

八、过程记录

8.1、display flex 和 inline-flex区别

参考链接

使用 Gap 属性给 CSS Flex 布局设置间距 - 知乎

flex布局（详解）-CSDN博客

Flex 布局语法教程 | 菜鸟教程

30 分钟学会 Flex 布局 - 知乎

flex布局（详解）_杰杰坚强的博客-CSDN博客

flex布局详细教程

处理：end value has mixed support, consider using flex-end instead_星月I随心的博客-CSDN博客