Html Css 核心知识 - flex （超详细）

一、定义

        Flex布局是一种用于创建灵活、自适应网页布局的CSS布局模型。它提供了一种简单而强大的方式来对齐和分布元素，特别适用于构建响应式和移动端友好的布局。

二、核心思想

        Flex布局的核心思想是将容器内的子元素看作一个弹性盒子，通过设置容器的属性来控制盒子的对齐和排列方式。Flex布局中包含两个概念，即Flex容器和Flex项目。

        Flex 容器:应用Flex布局的父元素，通过设置Flex属性来控制子元素的排列方式。Flex容器有一个主轴和一个交叉轴，主轴是子元素排列的方向，交叉轴则与主轴垂直。

        Flex项目：Flex容器内部的子元素，通过设置item属性来调整自身在容器内的布局行为，包括伸缩比例、对齐方式等。

三、特点

        1、 灵活活的盒子模型：弹性盒模型中的元素可以自适应容器的大小，并根据自身的属性进行伸缩，从而实现不同场景下的布局需求。

        2、 方便的对齐和分布：可以通过设置容器的属性，快速地实现子元素的对齐和分布，包括居中、两端对齐、垂直居中等。

四、flex 元素

1、思维导图

2、作用在 flex 容器上的元素

1> 开启 flex 布局 display: flex; (默认开启主轴排序-由左向右)

代码初始演示后续根据需求需要做出相应改动

<div class="father">
    <div class="son">son1</div>
    <div class="son">son2</div>
    <div class="son">son3</div>
    <div class="son">son4</div>
</div>
<style>
.father {
  height: 420px;
  width: 420px;
  padding: 10px;
  margin: 100px auto;
  border: 1px red solid;
  box-sizing: border-box;
  /* display: flex; */
  /* flex-direction: row; 默认开启了主轴排序(由左向右)*/
}
.son {
  height: 100px;
  width: 100px;
  margin-right: 50px;
  margin-bottom: 50px;
  color: white;
  text-align: center;
  font-size: 30px;
  line-height: 100px;
}
.son:nth-child(1) {
  background-color: olivedrab;
}
.son:nth-child(2) {
  background-color: red;
}
.son:nth-child(3) {
  background-color: orange;
  margin-bottom: 0px;
  margin-right: 0px;
}
</style>

未开启 flex 布局

开启 flex 布局后（取消display: flex; 这行的注释）

2> 控制容器（父元素）内项目（子元素）的排列方向和换行方式

a. 排列方向 flex-direction: '方向值' ；

方向值可取以下四个值

flex-direction: row; (默认值 主轴排序-由左向右)

flex-direction: row-reverse; (修改主轴方向取反 -  由右向左)

flex-direction: column; (修改主轴为交叉轴 - 即为现在主轴为 'y'轴 - 由上到下)

flex-direction: column-reverse; (修改主轴为交叉轴并方向取反 - 即为现在主轴为 'y'轴 - 由下到上)

b. 换行方式 flex-wrap: '换行值' ；

换行值可取以下三个值

flex-wrap: no-wrap（默认值 - 不允许换行-大小不够时盒子会自动伸缩）; 

flex-wrap: wrap（允许换行 - 位置不够时会换到下一行）; 

flex-wrap: no-reverse（允许换行且子元素由后向前排列）; 

c.flex-wrap: 'flex-direction的值'，'flex-wrap的值'

3> 控制容器（父元素）内项目（子元素）的对齐方式

a.主轴对齐方式 justify-content: '对齐方式';

对齐方式可以去以下六个值

justify-content: flex-start；(默认值-子元素在主轴起始位置对齐);

justify-content: flex-end；(子元素在主轴末尾位置对齐);

 justify-content: center；(子元素在主轴居中对齐);

  justify-content: space-between；(子元素平均分别在主轴、且首元素和尾元素分别位置主轴首尾位置);

  justify-content: space-around；(子元素平均分别在主轴、每个子元素两侧都有相同的空间-比如说son1距离主轴起始位置为50px那么距离son2就是100px);

   justify-content: space-between；(子元素平均分别在主轴、每个子元素与主轴起始位置和其他子元素留有相等来评价-比如说son1距离主轴起始位置为50px那么距离son2也是50px);

b.交叉轴对齐方式（单行 ） align-items: '对齐方式'; 

对齐方式可以取以下五个值

align-items: stretch;(默认值-子元素在交叉轴拉伸充满整个容器(演示图是没设置高度情况下 - 设置了高度不会拉伸且位于交叉轴起始位置))

 align-items: flex-start;(子元素在交叉轴起始位置对齐)

  align-items: flex-end;(子元素在交叉轴末尾位置对齐)

 align-items: center;(子元素在交叉轴居中对齐)

 align-items: baseline;(子元素在按照基线对齐-字符的底部或顶部将与其他行内文本元素的基线对齐)

b.交叉轴对齐方式（多行 ） align-content: '对齐方式'; 

对齐方式可以取以下五个值

 align-content: stretch;(默认值-子元素在交叉轴拉伸充满整个容器(演示图是没设置高度情况下 - 设置了高度不会拉伸且位于交叉轴起始位置))

 align-content: flex-start;(子元素在交叉轴起始位置对齐)

  align-content: flex-end;(子元素在交叉轴末尾位置对齐)

 align-items: center;(子元素在交叉轴居中对齐)

 align-content:space-between;(子元素在按照交叉轴对齐-首行元素位于交叉轴起始位置、尾行元素位于交叉轴末尾位置)

  align-content:space-around;(子元素在按照交叉轴对齐-每行元素两侧都有相同的空间-比如说第一行距离交叉轴轴起始位置为50px那么距离第二行就是100px)

3、作用在 flex 项目上（子元素）的元素

1> 控制子元素分配空间

a.flex-grow: '值'（分配子元素剩余空间时的放大比例，默认为0）

值可取为 整数、小数、百分比

.son:nth-child(1) {
  background-color: olivedrab;
  flex-grow: 0;
}
.son:nth-child(2) {
  background-color: red;
  flex-grow: 1;
}
.son:nth-child(3) {
  flex-grow: 10;
  background-color: orange;
  margin-bottom: 0px;
  margin-right: 0px;
}

a.flex-grow: '值'（分配子元素剩余空间时的缩小比例，默认为0）

值可取为 整数、小数、百分比

.son:nth-child(1) {
  background-color: olivedrab;
  flex-shrink: 0;
}
.son:nth-child(2) {
  background-color: red;
  flex-shrink: 5;
}
.son:nth-child(3) {
  background-color: orange;
  flex-shrink: 10;
  margin-bottom: 0px;
  margin-right: 0px;
}

c.flex-basic: '值'（分配子元素剩余空间前的初始大小）

值可取为 像素值、百分比

d.flex: 'flex-grow' 'flex-shrink' 'flex-basic'(整合这三个值)

值可取为 像素值、百分比

2> 控制子元素排列顺序

order: '值'（默认为0）

.son:nth-child(1) {
  background-color: olivedrab;
  order: 2;
}
.son:nth-child(2) {
  background-color: red;
  order: 3;
}
.son:nth-child(3) {
  background-color: orange;
  order: 1;
  margin-bottom: 0px;
  margin-right: 0px;
}

3> 控制子元素对齐方式 align-self：'对齐值'（ 控制单个子元素位于交叉轴对齐方式）

可以取以下六个值

align-self: auto; （默认值） 继承父元素align-item的值

align-self: flex-start; 位于交叉轴起始位置

align-self: flex-end; 位于交叉轴末尾位置

align-self: center; 位于交叉轴中间位置

align-self: baseline; 位于基线位置

align-self: stretch; 子元素被拉伸适应容器

.son:nth-child(1) {
  background-color: olivedrab;
  align-self: flex-start;
}
.son:nth-child(2) {
  background-color: red;
  align-self: center;
}
.son:nth-child(3) {
  background-color: orange;
  margin-bottom: 0px;
  margin-right: 0px;
  align-self: flex-end;
}
.son:

后续持续更新中...有帮助的话点个赞吧谢谢！