【HTML+CSS】弹性盒子

弹性布局超级重要，非常好用的布局!!在学习弹性盒子之前，先来了解一下标准盒模型和怪异盒模型吧，怪异盒模型也超好用喔~

盒子模型的组成部分

• content
• padding
• border
• margin

标准盒模型、怪异盒模型

标准盒子模型 默认

• box-sizing: content-box
• 盒模型的总宽度:width+左右的padding+左右的border+左右的margin
• 盒模型的总高度:height+上下的padding+上下的border+上下的margin

<style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      padding: 20px;
      border: 10px solid #000;
      box-sizing: content-box;
    }
</style>

怪异盒子模型 IE盒子模型

• box-sizing: content-box
• padding和border不会撑大盒子
• 元素的总宽度=width+左右的margin
  • width=width+左右的padding+左右的border
• 元素的总高度=height+上下的margin
  • height=height+上下的padding+上下的border

<style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      padding: 20px;
      border: 10px solid #000;
      /* 
       会自动向内压缩盒子的内容区域，不会撑大盒子
        那么我们就不用计算了，更好布局了
       */
      box-sizing: border-box;
    }
</style>

弹性盒子

弹性盒子 display: flex;

弹性盒子是什么？

• 是一种布局方式
• 弹性盒子元素的大小 排版 顺序都受到父元素的影响和控制
• 灵活控制子元素在父元素中水平垂直对齐方式
• 给一个元素设置了display: flex，那么这个元素就变成了弹性容器，这个元素的儿子们就变成了弹性项目，不会影响到孙子

弹性盒子的四个专有名词

1. 弹性容器

• 给一个元素设置了display: flex，发生弹性布局的元素们的父元素

2. 弹性项目

• 设置了display: flex的元素的儿子们，真正发生了弹性布局的元素们

3. 主轴

• 弹性项目的排列方式:
  • 主轴是x轴，主轴起点在左侧，主轴的终点在右侧
  • 主轴是x轴，主轴起点在右侧，主轴的终点在左侧
  • 主轴是y轴，主轴起点在顶侧，主轴的终点在底侧
  • 主轴是y轴，主轴起点在底侧，主轴的终点在顶侧

4. 交叉轴(侧轴)

• 是永远与主轴垂直的那个轴

设置元素为弹性容器

display: flex; //让块级元素变成容器
display: inline-flex; //让行内元素变成容器

特点:

• 添加给父元素的属性
• 弹性盒子只对子元素生效，与孙子无关，但可以嵌套使用
• 项目是主轴方向排列
• 项目的宽度大于容器的宽度的时候，会白动缩小以适应
• 子元素不受元素类型的影响，按照块级元素处理
• 弹性布局的目的，就是灵活的控制项目的水平/垂直对齐方式
• 只有设置了display: flex，其他弹性盒子属性才有效

<style>
    * {
      padding: 0;
      margin: 0;
    }


    ul {
      width: 400px;
      height: 400px;
      background-color: pink;
      list-style: none;
      /* 设置容器为弹性盒子 */
      display: flex;
    }


    li {
      width: 130px;
      height: 130px;
      background-color: cyan;
      border: 1px solid blue;
      box-sizing: border-box;
    }
</style>

容器的css属性

控制所有的弹性项目

控制所有的弹性项目
01.容器在主轴方向空间不够时，项目是否换行
flex-wrap: nowrap; 默认 主轴方向空间不够的时候，项目自动压缩，不换行
flex-wrap: wrap; 主轴方向空间不够的时候，项目换行

02.主轴方向
flex-direction: row; 默认值 水平从左往右
flex-direction: row-reverse; 水平从右往左
flex-direction: column; 垂直从上到下
flex-direction: column-reverse; 垂直从下到上

03.换行和主轴方向的简写
flex-flow: row-reverse wrap;

<style>
    .baba {
      width: 400px;
      height: 400px;
      border: 3px solid #000;
      margin: 50px auto;
      /* 设置容器为弹性盒子 */
      display: flex;
      /* 01.设置项目在主轴上是否换行 */
      /* 默认 不换行 收缩 */
      /* 换行 */
      flex-wrap: wrap;
      /* 02.主轴方向 */
      /* 默认 水平从左到右 */
      flex-direction: row;
      /* 水平从右到左 */
      flex-direction: row-reverse;
      /* 垂直从上到下 */
      flex-direction: column;
      /* 垂直从下到上 */
      flex-direction: column-reverse;
      /* 03.简写 */
      flex-flow: row-reverse wrap;
    }

    .son {
      width: 100px;
      height: 100px;
      border: 3px solid blue;
      box-sizing: border-box;
      font-size: 30px;
    }
  </style>
  <div class="baba">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
  </div>

1. 设置项目在主轴上的排列方式

• 默认 主轴起点对齐
  • justify-content: flex-start;
• 主轴终点对齐
  • justify-content: flex-end;
• 主轴中心点对文
  • justify-content:center.
• 容器两边有间隙，每个项目左右的空间相同
  • justify-content: space-around;
• 容器两边没有间隙，每个项目左右的空间相同
  • justify-content: space-between;

<style>
    .baba {
      width: 400px;
      height: 400px;
      border: 3px solid #000;
      margin: 50px auto;
      /* 设置容器为弹性盒子 */
      display: flex;
      /* 默认 主轴起点对齐 */
      justify-content: flex-start;
      /* 主轴终点对齐 */
      justify-content: flex-end;
      /* 主轴中心点对齐 */
      justify-content: center;
      /* 容器两边有间隙，每个项目左右的空间相同 */
      justify-content: space-around;
      /* 容器两边没有间隙，每个项目左右的空间相同 */
      justify-content: space-between;
    }


    .son {
      width: 100px;
      height: 100px;
      border: 3px solid blue;
      box-sizing: border-box;
      font-size: 30px;
    }
  </style>
  <div class="baba">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
  </div>

2. 设置项目在交叉轴(侧轴)上的排列方式

align-items: flex-start;在交叉轴的开始位置排列
align-items: flex-end;在交叉轴的结束位置排列
align-items: center;在交叉轴的居中位置排列
align-items: baseline; 基线对齐
align-items: stretch;默认 拉伸自已以适应交叉轴的空间

<style>
    .baba {
      width: 400px;
      height: 400px;
      border: 3px solid #000;
      margin: 50px auto;
      /* 设置容器为弹性盒子 */
      display: flex;
      /* 交叉轴开始位置排列 */
      /* align-items: flex-start; */
      /* 交叉轴结束位置排列 */
      /* align-items: flex-end; */
      /* 交叉轴居中位置排列 */
      align-items: center;
      /* 基线对齐 */
      /* align-items: baseline; */
      /* 默认值 拉伸自己以适应交叉轴的空间*/
      /* 01.不写项目的高度，设置默认值，项目会拉伸自己以适应父元素的高度 */
      /* 02.不写项目的高度，不设置为默认值，项目的高度靠内容撑开 */
      align-items: stretch;
    }


    /* 基线对齐 */
    .baba div:nth-child(1) {
      line-height: 20px;
    }


    .baba div:nth-child(2) {
      line-height: 30px;
    }


    .baba div:nth-child(3) {
      line-height: 40px;
    }


    .son {
      width: 100px;
      /* height: 100px; */
      border: 3px solid blue;
      box-sizing: border-box;
      font-size: 30px;
    }
  </style>
  <div class="baba">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
  </div>

3. 设置多行项目在交叉轴上的排列方式

• 默认值 拉伸以适应交叉轴的空间
  • align-content: stretch;
• 在交叉轴的开始位置排列
  • align-content: flex-start;
• 在交叉轴的结束位置排列
  • align-content: flex-end;
• 在交叉轴的居中位置排列
  • align-content: center;
• 容器两边有间隙，中间的间隙是两边的两倍
  • align-content: space-around;
• 容器两边没有间隙，中间的间隙平分
  • align-content: space-between;

<style>
    .baba {
      width: 500px;
      height: 400px;
      border: 3px solid #000;
      margin: 50px auto;
      /* 设置容器为弹性盒子 */
      display: flex;
      flex-wrap: wrap;
      /* 默认值 拉伸以适应交叉轴的空间 */
      align-content: stretch;
      /* 在交叉轴的开始位置排列 */
      align-content: flex-start;
      /* 在交叉轴的结束位置排列 */
      align-content: flex-end;
      /* 在交叉轴的居中位置排列 */
      align-content: center;
      /* 容器两边有间隙 */
      align-content: space-around;
      /* 容器两边没有间隙 */
      align-content: space-between;
    }


    .son {
      width: 100px;
      height: 100px;
      border: 3px solid blue;
      box-sizing: border-box;
      font-size: 30px;
    }
  </style>
  <div class="baba">
    <!-- div.son*15{$} -->
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
    <div class="son">4</div>
    <div class="son">5</div>
    <div class="son">6</div>
    <div class="son">7</div>
    <div class="son">8</div>
    <div class="son">9</div>
    <div class="son">10</div>
    <div class="son">11</div>
    <div class="son">12</div>
    <div class="son">13</div>
    <div class="son">14</div>
    <div class="son">15</div>
  </div>

项目属性

控制某一个弹性项目

1.设置单个项目在交叉轴上的排列方式

align-self:

• auto 默认值 继承父元素的align-items的属性值
  • 如果父元素没有align-items，就会去找align-items的默认值
• stretch 拉伸 项目在交叉轴上不设置尺寸，项目会拉伸自己以适应
• flex-start 交叉轴起点对齐
• flex-end 交叉轴终点对齐
• center 交叉轴居中对齐
• baseline 项目内部文本基线对齐

2.控制项目如何增长

• 如果主轴方向空间盈余，控制每个项目如何变大
• 父元素的盈余的尺寸，项目按照取值的占比，各自增长各自的尺寸
• flex-grow: 0 默认值 不分配空间 不扩展
• 数值 1 2 3 4…

<style>
    .box {
      width: 600px;
      height: 500px;
      border: 3px solid #000;
      display: flex;
    }


    .box div {
      width: 100px;
      height: 300px;
      box-sizing: border-box;
      border: 3px dashed blue;
      background-color: yellow;
    }


    /* 核心代码 */
    .box div:nth-child(1) {
      flex-grow: 1;
    }


    .box div:nth-child(2) {
      flex-grow: 2;
    }


    .box div:nth-child(3) {
      flex-grow: 3;
    }
  </style>
  <div class="box">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
  </div>

3.控制项目如何收缩

• 如果主轴方向空间不足，控制每个项目如何变小
• 父元素收缩的尺寸，项目按照取值的占地，自动分配各自收缩的尺寸
• flex-shrink：1 默认值 收缩
  • 0 不收缩
  • 数值 1 2 3 4

<style>
    .box {
      width: 300px;
      height: 600px;
      border: 3px solid #000;
      display: flex;
    }


    .box div {
      width: 200px;
      height: 400px;
      box-sizing: border-box;
      border: 3px dashed blue;
      background-color: yellow;
    }


    .box div:nth-child(1) {
      /* 默认值1 收缩 */
      /* 0 不收缩 */
      /* flex-shrink: 0; */
      flex-shrink: 1;
    }


    .box div:nth-child(2) {
      /* 0 不收缩 */
      /* flex-shrink: 0; */
      flex-shrink: 2;
    }


    .box div:nth-child(3) {
      /* 0 不收缩 */
      /* flex-shrink: 0; */
      flex-shrink: 3;
    }
  </style>
  <div class="box">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
  </div>

4.控制项目在主轴方向上的尺寸

• auto 默认 项目在主轴上没有设置flex-basis，会参考width,如果width也没有，靠内容撑开
• flex-basis
  • px为单位的数值
  • 百分比 参考父元素的值
• 当flex-basis和width冲突的话，以flex-basis为准

style>
    .box {
      width: 600px;
      height: 500px;
      border: 3px solid #000;
      display: flex;
    }


    .box div {
      /* width: 200px; */
      height: 400px;
      box-sizing: border-box;
      border: 3px dashed blue;
      background-color: yellow;
    }


    /* 核心代码 */
    .box div:nth-child(2) {
      width: 200px;
      flex-basis: 300px;
    }
  </style>
  <div class="box">
    <div class="son">a</div>
    <div class="son">文字文字</div>
    <div class="son">123456</div>
  </div>

5.项目属性的简写

• flex：增长 收缩 尺寸;
  • !顺序不可以换
• 平分空间 flex:1

<style>
    .box {
      width: 800px;
      height: 400px;
      border: 1px solid #000;
      display: flex;
    }


    .son {
      height: 100px;
      box-sizing: border-box;
      background-color: yellow;
      border: 1px solid blue;
      /* 平分空间 */
      flex: 1;
    }
  </style>
  <div class="box">
    <div class="son">文字文字</div>
    <div class="son">文字文字文字</div>
    <div class="son">文字文字文字文字</div>
  </div>