CSS之flex布局

目录

前言

flex布局原理

常见父元素属性

flex-direction

justify-content

flex-wrap

align-items

align-content

flex-flow

常见子元素属性

flex-grow

flex-shrink

flex-basis

flex

align-self

order

 总结

---

前言

之前介绍过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种：

1. flex-direction： 设置主轴的方向
2. justify-content： 设置主轴上的子元素排列方式
3. flex-wrap： 设置子元素是否换行
4. align-items：设置侧轴上的子元素的排列方式（单行）
5. align-content：设置侧轴上的子元素的排列方式（多行）
6. 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>
<script>
.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;
}
</script>

justify-content

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

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

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

•  center表示居中

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

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

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

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

flex-wrap

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

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

align-items

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

• flex-start 若侧轴为行，则从左到右排列；若侧轴为列，则从上到下排列；
• flex-end 若侧轴为行，则从右到左排列；若侧轴为列，则从下到上排列；
• center 居中
• stretch 拉伸，只有在不设置侧轴的宽度的时候，设置为拉伸才会生效

align-content

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

• flex-start 若侧轴为行，则整体从左到右排列；若侧轴为列，则整体从上到下排列；
• flex-end 若侧轴为行，则整体从右到左排列；若侧轴为列，则整体从上到下排列（和反着排序不同）；
• center 居中
• space-around 侧轴平分剩余空间
• space-between 先在侧轴首尾两头分布，剩余空间平分
• 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-shrink

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

flex-basis

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

以主轴为行为例：

若单独设置了width，则正常使用，超出部分的子元素不显示；

若单独使用flex-basis，则超出部分会自动变大，不会被限制；

若同时使用width和flex-basis，则实际宽度为二者中的最大值，并且会限制，内容超出部分直接溢出；

flex

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

align-self

该属性允许单个子元素与其它子元素不一样的在侧轴方向的排列方式，能够覆盖align-items属性；默认值是auto，即继承父元素的align-items属性；

order

用于表示子元素的排列顺序，数值越小越靠前排列，默认是0,可以有负值；

 总结