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

2023-09-26 34

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一、理解flex

57b4ced93ad9657217adfd878b9a4360_1360ff7bac1f462abfda88c1b233274c.png

二、理解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 容器中的尺寸发生变化，以适应不同的屏幕尺寸或者容器大小。

a1c5b937ebc0199606f7e3a1c4913502_6f49009b10e7834ccce9ced0c18b440b.jpeg

五、Flex容器

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

六、Flex项目

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

七、DEMO / vue3.3 + ts

7.1、水平、垂直居中

477214728d534cb71cc6a64784f032f5_ebb3724220c949c5a60b69b8c2888897.png

<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

f6aea22327661db342a354bcdf5982fc_b9ae0436198d44b19caf2aac8bd7ab9e.png

<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>