Flex布局（弹性布局）

概念：

flex是flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设为flex布局以后，子元素的 float 、clear和vertical-align属性将失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

• 默认主轴方向就是x轴方向，水平向右
• 默认侧轴方向就是y轴方向，水平向下

注意：主轴和侧轴是会变化的，flex-direction属性决定主轴的方向(即项目的排列方向)，就看flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

布局原理

采用Flex布局的元素，称为Flex容器(flexcontainer)，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flexitem)，简称”项目”。

div {
    display: flex;
    width: 80%;
    height: 300px;
    background-color:Dpink;
    justify-content:space-around;
}
div span {
    /*width:150px;*/
    height: 100px;
    background-color:purple;
    margin-right: 5px;
    flex: 1;
}

这里div就是flex父容器 体验中span就是子容器flex项目

子容器可以横向排列也可以纵向排列

总结flex布局原理:

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

常见属性

对父容器设置：

1. flex-direction 设置主轴的方向

• row 默认值从左到右

• row-reverse 从右到左

• column 从上到下

• column-reverse 从下到上

2. justify-content 设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意:使用这个属性之前一定要确定好主轴是哪个

• flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右

• flex-end：从尾部开始排列

• center：在主轴居中对齐(如果主轴是x轴则水平居中)

• space-around：平分剩余空间

• space-between：先两边贴边，再平分剩余空间(重要)

3. flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线(又称“轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的

• nowrap：默认值，不换行

• wrap：换行

• wrap-reverse：换行，第一行在下方

4. align-items 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴)上的排列方式在子项为单项的时候使用

• flex-start：默认值 从上到下

• flex-end：从下到上

• center：挤在一起居中( 垂直居中 )

• baseline: 项目的第一行文字的基线对齐。

• stretch：拉伸

5. align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

• flex-start：默认值在侧轴的头部开始排列

• flex-end：在侧轴的尾部开始排列

• center：在侧轴中间显示

• stretch：设置子项元素高度平分父元素高度

• space-around：子项在侧轴平分剩余空间

• space-between：子项在侧轴先分布在两头，再平分剩余空间

align-content 和 align-items 区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸

align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空等属性值。

总结就是 单行找align-items ，多行 （换行） 找align-content

6. flex-flow flex-direction和flex-wrap 属性的复合属性

• flex-flow:row wrap;

对子容器设置：

1. flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item {
    flex:<number>; /* default 0 */
}

2. align-self 控制子项自己在侧轴上的排列方式

• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
• 默认值为auto，表示继承父素的align-items属性
• 如果没有父元素，则等同于stretch

span:nth-child(2) {
    /*设置自己在侧轴上的排列方式*/
    align-self: flex-end;
}

3. order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

注意：和z-index不一样。

  div span:nth-child(2){
    /*默认是0    -1比0小所以在前面*/
    order: -1;
  }

总结：

对父容器设置的属性	作用	属性值
flex-direction	设置主轴的方向	row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上
justify-content	设置主轴上的子元素排列方式> 注意:使用这个属性之前一定要确定好主轴是哪个	flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右 flex-end：从尾部开始排列 center：在主轴居中对齐(如果主轴是x轴则水平居中) space-around：平分剩余空间 space-between：先两边贴边，再平分剩余空间(重要)
flex-wrap	设置子元素是否换行	nowrap：默认值，不换行 wrap：换行 wrap-reverse：换行，第一行在下方
align-content	设置侧轴上的子素的排列方式(多行)	flex-start：默认值在侧轴的头部开始排列 flex-end：在侧轴的尾部开始排列 center：在侧轴中间显示 stretch：设置子项元素高度平分父元素高度 space-around：子项在侧轴平分剩余空间 space-between：子项在侧轴先分布在两头，再平分剩余空间
align-items	设置侧轴上的子元素排列方式(单行)	flex-start：默认值 从上到下 flex-end：从下到上 center：挤在一起居中( 垂直居中 ) baseline: 项目的第一行文字的基线对齐。 stretch：拉伸
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap	flex-flow:row wrap;

对子容器设置的属性	作用	属性值
flex-grow	flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。	flex-grow: ; / default 0 /
flex-shrink	flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。	flex-shrink: ; / default 1 /
flex-basis	设置Flex项在主轴上的初始大小，可以是具体的长度值或百分比	flex-basis: auto; / default auto /
flex	定义子项目分配剩余空间，用flex来表示占多少份数> flex属性是flex-grow、flex-shrink 和 flex-basis的简写，默认值为0 1 auto	flex:
align-self	控制子项自己在侧轴上的排列方式	align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 默认值为auto，表示继承父素的align-items属性 如果没有父元素，则等同于stretch
order	定义项目的排列顺序	order: -1; 数值越小，排列越靠前，默认为0

应用场景

为什么用flex布局？

它为开发者提供了一种更高效、更灵活、响应式地来处理网页布局

1. 灵活性：Flex布局提供了高度的灵活性，可以轻松适应不同的屏幕尺寸和方向，是响应式设计的理想选择。
2. 简化的布局语法：Flex布局使用简单的CSS属性来定义复杂的布局结构，减少了以往需要的复杂和冗长的CSS代码。
3. 自动尺寸调整：Flex项可以自动调整大小以适应其内容或分配给它们的空间，简化了布局的维护。
4. 高效的对齐控制：Flex布局允许开发者轻松地在主轴和交叉轴上对齐项目，包括垂直和水平居中。
5. 空间分配：Flex布局可以智能地在项目之间分配额外的空间，提供了justify-content和align-items等属性来控制布局的对齐和分布。
6. 无需浮动：Flex布局提供了一种不依赖于float的布局方式，避免了与浮动相关的常见问题。
7. 支持多行和换行：Flex容器中的项目可以自动换行，且可以控制行的对齐方式，这为多行布局提供了便利。

什么情况下会使用flex布局？

1. 响应式网页设计：

   • Flex布局可以轻松创建响应式布局，使网页能够适应不同的屏幕尺寸和设备。。

2. 居中对齐：

   • Flex布局提供了简便的方法来居中对齐元素，无论是在主轴上还是交叉轴上。

3. 导航菜单：

   • Flex布局可以用来创建水平或垂直的导航菜单，易于实现导航项的对齐和分布。

4. 多行布局：

   • 当Flex容器设置为flex-wrap: wrap;时，可以实现多行布局，适用于创建网格或列表视图。

5. 一维布局：

   • 当需要在水平或垂直方向上排列元素时，Flex布局可以快速实现线性布局

6. 等高列：

   • 使用align-items: stretch;可以使Flex项等高，适用于创建等高列的布局。

7. 卡片布局：

   • 利用Flex布局可以轻松排列一组卡片，实现整齐且响应式的卡片视图。

8. 空间分配：

   • Flex布局可以轻松地在元素之间分配空间，使用justify-content和align-items属性。

9. 自适应布局：

   • Flex布局中的flex-grow属性允许元素根据可用空间自动调整大小。

10. 内容环绕广告或浮动按钮：

    • 使用Flex布局可以创建内容区域，其中广告或浮动按钮围绕内容布局。

11. 分栏布局

代码示例：

两栏、三栏自适应布局

.wrap { display: flex; }
.left { width: 200px; }
.right { flex: 1; }

实现子盒子垂直居中

    /*在父盒子设置*/
    .wrap{
        display: flex;
        justify-content:center;
        align-item:center;
    }