flex布局，弹性盒子，css使用及理解

最新推荐文章于 2023-09-20 11:41:01 发布

一只小林

最新推荐文章于 2023-09-20 11:41:01 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_54598736/article/details/127267105

版权

flex布局

以下内容主要分为四个部分：

常见概念

flex容器相关属性

flex元素相关属性

flex布局的应用

flex布局的兼容性处理

flex布局的相关概念

弹性盒模型

弹性盒模型（Flexible Box模型），也被成为flexbox，是一种一维的布局模型（也就是说一次只能处理一个维度上的元素布局，一行或者一列）。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。

主轴和交叉轴

主轴和交叉轴是两根互相垂直的线。可以用flex-direction设置主轴（设置为row或者column）。那么交叉轴就是垂直于主轴的线。

需要注意的是：一旦设置主轴方向，那么关于flex容器上的盒子的属性都是基于主轴的。

起始线和终止线

起始线和终止线是基于轴线的，主轴和交叉轴都有起始线和终止线。如果flex-direction的方向是row，那么主轴起始线就是左边，终止线就是右边，交叉轴的起始线就是上边，终止线就是下边。如果flex-direction的方向是row-reverse，那么主轴起始线就是右边，终止线就是左边，交叉轴的起始线就是上边，终止线就是下边。如果flex-direction的方向是column，那么主轴起始线就是上边，终止线就是下边。交叉轴起始线就是左边，终止线就是右边。如果flex-direction的方向是column-reverse，那么主轴起始线就是下边，终止线就是上边。交叉轴起始线就是左边，终止线就是右边。

flex容器

采用了flexbox的区域就叫做flex容器。也就是说只要元素的display设置为flex或者inline-flex，那么它就是flex容器。它的所有子元素就是flex元素。

flex元素具有的默认特征：

元素排列为一行（flex-direction的初始值是row）
元素从主轴的起始线开始
元素不会在主轴方向拉伸，但是可以缩小
元素被拉伸来填充交叉轴大小
flex-basis属性为auto
flex-wrap属性为nowrap

flex布局的属性

flex容器上的属性

1. flex-direction @

flex-direction是用来设置主轴的方向，一共可以取四个值：

row
row-reverse
column
column-reverse

带有row的表示按行来排列，row-reverse表示倒着排，也就是所从右往左。带有column的表示按列来排列，column-reverse表示从下往上。下面我们一起来看一下具体效果基础代码如下

<div class="box-wrap">
  <div class="box">我是第1个盒子</div>
  <div class="box">我是第2个盒子</div>
  <div class="box">我是第3个盒子</div>
  <div class="box">我是第4个盒子</div>
  <div class="box">我是第5个盒子</div>
</div>
.box-wrap {
  width: 1100px;
  height: 600px;
  background-color: aquamarine;
  display: flex;
  flex-direction: row;
  .box {
    width: 100px;
    height: 68px;
    background-color: lightcyan;
    border: 1px solid lightgray;
  }
}

row

flex-direction: row;

效果：

row-reverse

flex-direction: row-reverse;

效果：

column

flex-direction: column;

效果：

column-reverse

flex-direction: column-reverse;

效果如下：

2. flex-wrap @

flex-wrap属性是用来设置容器内的元素是否换行显示。默认是不会换行的，而且元素会被压缩然后一行显示。可以取以下几种值

nowrap：不会换行，默认被压缩，如果不被压缩的话那就超出容器显示
wrap: 超出容器时会换行
wrap-reverse: 超出容器时会换行，且交叉轴的起始线和终止线会反过来

下面这几种值我们平时不会使用到，仅供了解

inherit：指定这个属性应从父元素继承它的值
initial：用于设置属性为它的默认值
revert: 让当前元素的样式还原成浏览器内置的样式
unset: 不做设置。但是与css是否继承属性相关，如果这个属性是可继承属性，那么该设置等同于inherit；如果这个属性是非继承属性，那么该设置等同于initial。

下面我们来看一下常用的三种属性的效果基础代码如下

<div class="box-wrap">
  <div class="box">我是第1个盒子</div>
  <div class="box">我是第2个盒子</div>
  <div class="box">我是第3个盒子</div>
  <div class="box">我是第4个盒子</div>
  <div class="box">我是第5个盒子</div>
</div>
.box-wrap {
  width: 1100px;
  height: 600px;
  background-color: aquamarine;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  .box {
    width: 300px;
    height: 68px;
    flex-shrink: 0;
    background-color: lightcyan;
    border: 1px solid lightgray;
  }
}

nowrap

flex-wrap: nowrap;

因为默认是会压缩的，即使你设置了宽度，弹性盒子也会被压缩，所以这里我们为了看到flex元素超出flex容器的效果，将压缩属性设置为0.

效果：

wrap

flex-wrap: wrap;

效果如下：

wrap-reverse

flex-wrap: wrap-reverse;

效果如下：

3. justify-content @

justify-content是用来设置元素在主轴方向上的对齐方式。一共有这几个属性值：

center: 居中对齐 @
left: 伸缩元素一个挨一个在对齐容器的左边缘，如果属性的轴（主轴）与内联轴不平行，则left的行为类似于start @
right: 伸缩元素一个挨一个在对齐容器的右边缘，如果属性的轴（主轴）与内联轴不平行，则right的行为类似于end @
start: 从主轴的开始排列。每行第一个元素与行首对齐，后面所有元素都与前一个对齐 @
end: 从主轴的行尾排列。每行最后一个元素与行尾对齐，前面所有元素都与后一个对齐@
flex-start：从主轴的开始排列。每行第一个弹性元素与行首对齐，后面所有弹性元素都与前一个对齐
flex-end：从主轴的行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐
space-around：弹性元素均匀分布。相邻元素间距离相等，每行第一个元素到行首的距离和每行最后一个元素到行尾的距离等于相邻元素之间距离的一半 @
space-between: 弹性元素均匀分布。相邻元素间距离相等，每行第一个元素到行首的距离和每行最后一个元素到行尾的距离等于0（也就是第一个元素和行首对齐，最后一个元素和行尾对齐）@
space-evenly: 弹性元素均匀分布。相邻元素间距离相等，每行第一个元素到行首的距离和每行最后一个元素到行尾的距离等于两个元素之间的距离
stretch: 可以伸缩
baseline: 所有的元素基线对齐
first baseline: 指定第一个元素的基线和其他元素对齐
last baseline：指定最后一个元素的基线和所有元素对齐
safe：与对齐关键字一起使用，如果选定的关键字会导致元素溢出容器造成数据丢失，那么将会使用 start 代替它。
unsafe：无论项目和对齐容器的相对大小如何，都会遵守给定的对齐值

下面我们来看一下常见的几种属性值的效果基础代码如下

<div class="box-wrap">
  <div class="box first">我是第1个盒子x</div>
  <div class="box">我是第2个盒子我是第2个盒子我是第2个盒子x</div>
  <div class="box">我是第3个盒子x</div>
  <div class="box">我是第4个盒子x</div>
  <div class="box last">我是第5个盒子x</div>
</div>
.box-wrap {
  width: 1100px;
  height: 600px;
  background-color: aquamarine;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  .box {
    width: 300px;
    height: 68px;
    font-size: 20px;
    backgrou