CSS之flex布局

迷糊的小小淘

已于 2023-06-20 14:58:49 修改

阅读量2k

点赞数 1

分类专栏：前端知识文章标签： Flex布局 CSS布局移动端布局父元素属性子元素属性

于 2022-06-27 23:38:28 首次发布

本文链接：https://blog.csdn.net/ks795820/article/details/125483364

版权

前端知识专栏收录该内容

51 篇文章 5 订阅

订阅专栏

前言

之前介绍过css的传统布局，见CSS知识点总结(二)_迷糊的小小淘的博客-CSDN博客一圆角边框border-radius: length /*属性值为数值或百分比的形式*/该属性可将正方形变成圆，只要将length值设为50%即可；可将矩形设置成有圆角的矩形，只需将其设置为矩形高度的一般即可；二盒子阴影box-shadow: 水平阴影垂直阴影模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色内/外阴影其中水平阴影和垂直阴影两个属性是必须项，其它项可忽略；默认为外阴影(outset)、(内阴影为inset)三 CSS布局的三种机制上面提到布局的本质https://blog.csdn.net/ks795820/article/details/120732994

但是传统布局方式虽然在各个浏览器中兼容性好，但是其布局繁琐，在移动端不能很好的布局，有一定的局限性；

2009年，W3C提出一种新的方案---flex布局，其操作方便，布局非常简单，通常多用于移动端，目前在各大浏览器中也得到了很好的兼容（不支持或部分支持IE11或更低版本）；

注意：当为父盒子设置为flex布局后，子元素的float、clear、vertical-align属性都将失效

flex布局原理

采用flex布局的元素，称为flex容器（flex container），简称容器。它的所有子元素(非后代元素)自动称为容器成员，称为flex项目（flex item），简称项目；

通过给父元素添加flex属性，来控制子元素的位置和排列方式；

常见父元素属性

常见的父元素属性主要有6种：

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-items：设置侧轴上的子元素的排列方式（单行）
align-content：设置侧轴上的子元素的排列方式（多行）
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction

用于设置主轴的方向；在flex布局中，分为主轴和侧轴，参数是row（行）、column（列）、row-reverse（行的反方向）、column-reverse（列的反方向）

<template>
  <div class="book">
    <div class="item1"></div>
    <div class="item2"></div>
  </div>
</template>
<style>
.book {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  margin: 20px;
  border: 1px dotted red;
}
.item1 {
  height: 100px;
  width: 150px;
  background-color: burlywood;
}
.item2 {
  height: 100px;
  width: 150px;
  background-color: skyblue;
}
</style>

改变了主轴的方向，侧轴方向就会随之改变；

justify-content

用于设置主轴上的子元素排列方式，主要有五个参数可供使用：

flex-start 从头部开始，即若主轴是行，则从左到右排列，若主轴是列，则从上到下排列；

flex-end即从尾部开始排列，与上述正好相反

center表示居中

space-around表示将剩余的空间平均分配

space-around是指每个子元素在主轴上的margin值相同。

space-between 指两边贴边，再平分剩余空间

space-evenly 表示空隙相同，均匀分布在一行

注意：如果在主轴上排不下的话，就会压缩各子元素的体积大小；

flex-wrap

用于设置子元素在排不下的时候是否换行，否则就会压缩体积；默认是不换行（nowrap），压缩大小，另外两个属性是wrap和wrap-reverse

图中大盒子宽度为400，小盒子宽度是150，一行放三个放不开，若不设置换行就是左侧（压缩），设置了就会换行（wrap），显示在下一行；图三是设置了wrap-reverse（反向换行）的效果~

align-items

用于设置侧轴上的排列方式，用于子元素为单行的时候使用；有如下参数可供选择：

flex-start 若侧轴为行，则从左到右排列；若侧轴为列，则从上到下排列；
flex-end 若侧轴为行，则从右到左排列；若侧轴为列，则从下到上排列；
center 居中
baseline 第一行/列文字的基线对齐；
stretch 拉伸，只有在不设置侧轴的宽度的时候，设置为拉伸才会生效





要把侧轴的长度或宽度注释掉，stretch才生效

align-content

用于设置侧轴上的子元素的排列方式，应用于子元素是多行的情况；有如下参数可供选择：

flex-start 若侧轴为行，则整体从左到右排列；若侧轴为列，则整体从上到下排列；
flex-end 若侧轴为行，则整体从右到左排列；若侧轴为列，则整体从上到下排列（和反着排序不同）；
center 居中
space-around 侧轴平分剩余空间
space-between 先在侧轴首尾两头分布，剩余空间平分
space-evenly 表示侧轴均匀分布，即各部分间隔相同
stretch 拉伸，在侧轴上平分父元素高度（侧轴是列）或宽度（侧轴是行）----前提是不设置子元素的在侧轴上的长度，才会生效

flex-flow

是flex-direction和flex-wrap的复合属性，即可同时定义这两种属性（没有顺序要求），如：

flex-flow: row wrap; // 表示以行为主轴，并且换行

默认值为row nowrap

常见子元素属性

常见的子元素属性主要有6种：

flex-grow 定义子元素占剩余空间的份数，默认为0，表示如果存在剩余空间，也不放大；
flex-shrink 定义子元素占剩余空间的缩小比例，即当空间不够时，缩小几倍，默认是1，表示当空间不足时，该子元素将缩小，若设置为0，则空间不足时，子元素不变，负值无效
flex-basis 定义了在分配剩余空间之前，子元素占据的主轴空间，默认值是auto，即子项目本来的大小（若主轴是行，则为width，若主轴是列，则为height）
flex 是flex-grow、flex-shrink、flex-basis的复合属性，默认值为0 1 auto，后两个属性可选
align-self 用于控制单独的子元素在侧轴的排列方式
order 表示子元素的排列顺序（此处此单独的前后顺序）

flex-grow

定义子元素占剩余空间的份数，默认是0；并不是指某个子元素是另一个子元素的几倍，重点是剩余空间，当所有的子元素flex-grow都设置为1时，表示平均分配剩余空间；若三个子元素的flex-grow分别是1,2,3，则分别得到剩余空间的1/6\，2/6、3/6份；

flex-shrink

表示当空间不够时，子元素压缩的比例，若某个子元素设置了为0，则在空间不够时，此元素并不会被压缩；默认所有的子元素flex-shrink都是1，在空间不够时，等比例进行压缩；

1正常显示，2超出部分被隐藏

1被压缩，2正常显示了出来

例如：有父元素宽度为400px，三个子元素宽度分别为200px、300px、200px，flex-shrink分别设置为1,2,3，代码如下：

.box {
  width: 400px;
  height: 400px;
  background-color: rgb(220, 230, 245);
  display: flex;
}
.box1 {
  width: 200px;
  height: 100px;
  background-color: yellow;
  flex-shrink: 1;
}
.box2 {
  width: 300px;
  height: 100px;
  background-color: skyblue;
  flex-shrink: 2;
}
.box3 {
  width: 200px;
  height: 100px;
  background-color: orange;
  flex-shrink: 3;
}

若想刚好容纳下三个项目，需要总宽度为700px，此时需要压缩，要将700-400px按各自比例进行压缩：

分母：200 * 1 + 300 *2 + 200 * 3 = 1400px;

比例：

项目1：（200*1） / 1400 = 1 / 7；

项目2：（300*2） / 1400 = 6 / 14；

项目3：（200*3） / 1400 = 6 / 14；

最终收缩大小：

项目1： 1/7 * 300px

项目2： 6/14* 300px

项目3： 6/14 * 300px

所以项目1的宽度为157.14px，项目2的宽度为171.43px，项目3的宽度为71.43px

flex-basis

flex-basis定义了在分配多余空间之前，子元素占据的主轴空间；(不常用)

以主轴为行为例：

若只设置了width，则正常使用，则按width数值进行展示；

若设置了flex-basis则width失效，宽按照flex-basis的值设置；

如下示例：定义了width与flex-basis则按照flex-basis展示宽度：

以主轴为列时，则设置了flex-basis会覆盖就会覆盖子元素的height；

该属性的作用：浏览器会根据该属性计算主轴上是否有多余空间（计算剩余空间，默认是auto，即而不用width或height）

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的合写，默认值为0 1 auto。后两个属性可选。

未加flex，默认占剩余空间份数为0

加了flex，item1占两份，item2占一份(注意：并不是item1是item2的两倍，是剩余空间)

如果写flex：1 1 auto，则可以简写为flex：auto；

如果写flex：1 1 0，设置flex-basis为0，即按照原始width或height则可以简写为flex：1；

如果写flex：0 0 auto，则可以简写为flex：none；

如果写flex：0 1 auto，则可以简写为flex：0 auto----即flex初始值