flex 容器与项目

`display`属性

序号	属性值	描述	备注
1	`flex;`	创建 flex 块级容器	内部子元素自动成为 flex 项目
2	`inline-flex;`	创建 flex 行内容器	内部子元素自动成为 flex 项目

flex 容器与项目特征

序号	容器/项目	默认行为
1	容器主轴	水平方向
2	项目排列	沿主轴起始线排列(当前起始线居左)
3	项目类型	自动转换”行内块级”元素,不管之前是什么类型
4	容器主轴空间不足时	项目自动收缩尺寸以适应空间变化,不会换行显示
5	容器主轴存在未分配空间时	项目保持自身大小不会放大并充满空间

1.flex 容器主轴方向

1.1 `flex-direction`属性

序号	属性值	描述
1	`row`默认值	主轴水平: 起始线居中,项目从左到右显示
2	`row-reverse`	主轴水平:起始线居右, 项目从右向左显示
3	`column`	主轴垂直: 起始线居上,项目从上向下显示
4	`column-reverse`	主轴垂直: 起始线居下,项目从下向上显示

练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 300px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        flex-direction: column-reverse;
        /* display: inline-flex; */
      }
      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 300px;
        background-color: red;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

效果图：

2.flex 容器主轴项目换行

2.1 `flex-wrap`属性

序号	属性值	描述
1	`nowrap`默认值	项目不换行: 单行容器
2	`wrap`	项目换行: 多行容器,第一行在上方
3	`wrap-reverse`	项目换行: 多行容器,第一行在下方

联系代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 300px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        flex-wrap: wrap;
        /* display: inline-flex; */
      }
      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 300px;
        background-color: red;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

效果图：

flex 容器主轴与项目换行简写

1. `flex-flow`属性

flex-flow是属性flex-direction和flex-wrap的简写
语法: flex-flow: flex-direction flex-wrap

属性值	描述
`row nowrap`默认值	主轴水平, 项目不换行

练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 300px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        flex-flow: flex-direction flex-wrap;
      }
      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 300px;
        background-color: red;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

效果图：

flex 容器主轴项目对齐

1. `justify-content`属性

当容器中主轴方向上存在剩余空间时, 该属性才有意义

序号	属性值	描述
1	`flex-start`默认	所有项目与主轴起始线对齐
2	`flex-end`	所有项目与主轴终止线对齐
3	`center`	所有项目与主轴中间线对齐: 居中对齐
4	`space-between`	两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5	`space-around`	分散对齐: 剩余空间在每个项目二侧平均分配
6	`space-evenly`	平均对齐: 剩余空间在每个项目之间平均分配

练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 300px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        justify-content: space-evenly;
      }
      /* 项目/子元素 */
      .item {
        width: 50px;
        height: 50px;
        background-color: red;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

效果图：

flex 容器交叉轴项目对齐

1. `align-items`属性

该属性仅适用于: 单行容器
当容器中交叉轴方向上存在剩余空间时, 该属性才有意义

序号	属性值	描述
1	`flex-start`默认	与交叉轴起始线对齐
2	`flex-end`	与交叉轴终止线对齐
3	`center`	与交叉轴中间线对齐: 居中对齐

练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 300px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        align-items: center;
      }
      /* 项目/子元素 */
      .item {
        width: 50px;
        height: 50px;
        background-color: red;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

效果图：

flex 多行容器交叉轴项目对齐

1. `align-content`属性

该属性仅适用于: 多行容器
多行容器中, 交叉轴会有多个项目, 剩余空间在项目之间分配才有意义

序号	属性值	描述
1	`stretch`默认	项目拉伸占据整个交叉轴
1	`flex-start`	所有项目与交叉轴起始线(顶部)对齐
2	`flex-end`	所有项目与交叉轴终止线对齐
3	`center`	所有项目与交叉轴中间线对齐: 居中对齐
4	`space-between`	两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5	`space-around`	分散对齐: 剩余空间在每个项目二侧平均分配
6	`space-evenly`	平均对齐: 剩余空间在每个项目之间平均分配

提示: 多行容器中通过设置flex-wrap: wrap | wrap-reverse实现
练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 300px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        align-content: space-evenly;
      }
      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

效果图：

flex 项目交叉轴单独对齐

1. `align-self`属性

该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式

序号	属性值	描述
1	`auto`默认值	继承 `align-items` 属性值
2	`flex-start`	与交叉轴起始线对齐
3	`flex-end`	与交叉轴终止线对齐
4	`center`	与交叉轴中间线对齐: 居中对齐
5	`stretch`	在交叉轴方向上拉伸
6	`baseline`	与基线对齐(与内容相关用得极少)

练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目独立对齐方向</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 150px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
      }
      /* 项目/子元素 */
      .item {
        width: 50px;
        height: 50px;
        background-color: rgb(181, 16, 231);
        font-size: 1.5rem;
        align-self: auto;
      }
      .item:first-of-type {
        height: inherit;
        align-self: stretch;
        background-color: rgb(212, 34, 49);
      }
      .item:nth-of-type(2) {
        background-color: rgb(8, 110, 226);
        align-self: flex-start;
      }
      .item:nth-of-type(3) {
        background-color: rgb(251, 2, 168);
        /* align-self: 会覆盖掉项目中的align-items; */
        align-self: flex-end;
      }
      .item:last-of-type {
        align-self: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

效果图：

flex 项目放大因子

1. `flex-grow`属性

在容器主轴上存在剩余空间时, flex-grow才有意义
该属性的值,称为放大因子, 常见的属性值如下:

序号	属性值	描述
1	`0`默认值	不放大,保持初始值
2	`initial`	设置默认值,与`0`等效
3	`n`	放大因子: 正数

练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目放大因子</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 150px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
      }
      /* 项目/子元素 */
      .item {
        width: 50px;
        height: 50px;
        background-color: rgb(230, 28, 28);
        font-size: 1.5rem;
        /* 默认不放大 */
        flex-grow: initial;
        flex-grow: 0;
      }
      /*
      主轴剩余空间 300 - 50*3 = 150px;
      当前每个项目的放大因子是1, 一共3个项目,所以因子之和是3, 150 / 3 = 50
      每一个项目分到了50px
      再将每个项目在原宽度基础上增加50px, 得到新的宽度
      */
      .item:first-of-type {
        background-color: rgb(228, 29, 29);
        flex-grow: 1;
      }
      .item:nth-of-type(2) {
        background-color: rgb(253, 165, 0);
        flex-grow: 2;
      }
      .item:last-of-type {
        background-color: rgb(195, 255, 0);
        flex-grow: 3;
      }
      /*
      150px要分配给每个项目
      放大因子之和:  150 / (1+2+3) = 25px;
      每个项目根据自己的放大因子来分配
      第一个因子是1, 分到1 * 25 =25, 50 + 25 = 75px
      第二个因子是2, 分到2 * 25 = 50 , 50 +50 = 100px
      第三个因子是3, 分到3*25 = 75px, 50 + 75px = 125px;
      */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

效果图：

flex 项目收缩因子

1. `flex-shrink`属性

当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
该属性的值,称为收缩因子, 常见的属性值如下:

序号	属性值	描述
1	`1`默认值	允许项目收缩
2	`initial`	设置初始默认值,与 1 等效
3	`0`	禁止收缩,保持原始尺寸
4	`n`	收缩因子: 正数

练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目收缩因子</title>
    <style>
      /* 容器 */
      .container {
        width: 180px;
        height: 150px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        flex-flow: row nowrap;
      }
      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 50px;
        background-color: rgb(251, 71, 0);
        font-size: 1.5rem;
        /* 禁止收缩 */
        flex-shrink: 0;
      }
      .item:first-of-type {
        background-color: rgb(255, 0, 0);
        flex-shrink: 1;
      }
      .item:nth-of-type(2) {
        background-color: rgb(255, 255, 255);
        flex-shrink: 2;
      }
      .item:last-of-type {
        background-color: rgb(217, 0, 255);
        flex-shrink: 3;
      }
      /*
      当前三个项目宽度超出了主轴空间多少: 300 - 180 = 120px, 说明有120px要让三个项目消化掉
      三个项目的收缩因子之和: 6
      每一份就是: 120 /6 = 20
      第一个项目:  100 - 1 * 20 = 80px
      第二个项目: 100 - 2* 20 = 60px
      第三个项目: 100 - 2* 30 = 40px
      */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

效果图：

flex 项目计算尺寸

1. `flex-basis`属性

在分配多余空间之前,项目占据的主轴空间
浏览器根据这个属性，计算主轴是否有多余空间
该属性会覆盖项目原始大小(width/height)
该属性会被项目的min-width/min-height值覆盖

序号	属性值	描述
1	`auto`	默认值: 项目原来的大小
2	`px`	像素
3	`%`	百分比

优先级: 项目大小 < flex-basis < min-width/height
练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目在主轴上的计算宽度</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 300px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
        flex-flow: row wrap;
      }
      /* 项目/子元素 */
      .item {
        width: 150px;
        height: 150px;
        background-color: rgb(255, 0, 0);
        font-size: 1.5rem;
      }
      .item {
        /* auto === width */
        flex-basis: auto;
        /* flex-basis: 权重大于width; */
        flex-basis: 70px;
        flex-basis: 20%;
        flex-basis: 5rem;
        /* min-width / max-width 权重大于flex-basis; */
        max-width: 100px;
        flex-basis: 150px;
        /* width < flex-basis < min/max-width; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

flex 项目缩放的简写

1. `flex`属性

项目放大,缩小与计算尺寸,对于项目非常重要,也很常用
每次都要写这三个属性,非常的麻烦,且没有必要
flex属性,可以将以上三个属性进行简化:
语法: flex: flex-grow flex-shrink flex-basis

1.1 三值语法

序号	属性值	描述
1	第一个值: 整数	`flex-grow`
2	第二个值: 整数	`flex-shrink`
3	第三个值: 有效宽度	`flex-basis`

举例:

序号	案例	描述
1	`flex: 0 1 auto`	默认值: 不放大,可收缩, 初始宽度
2	`flex: 1 1 auto`	项目自动放大或收缩适应容器
3	`flex: 0 0 100px`	按计算大小填充到容器中

1.2 双值语法

序号	属性值	描述
1	第一个值: 整数	`flex-grow`
3	第二个值: 有效宽度	`flex-basis`

举例:

案例	描述
`flex: 0 180px`	禁止放大,按计算大小填充到容器中

1.3 单值语法

序号	属性值	描述
1	整数	`flex-grow`
2	有效宽度	`flex-basis`
3	关键字	`initial	auto	none`

举例:

序号	案例	描述
1	`flex: 1`	`flex: 1 1 auto`
2	`flex: 180px`	`flex: 1 1 180px`
3	`initial`	`flex: 0 1 auto`
4	`auto`	`flex: 1 1 auto`
5	`none`	`flex: 0 0 auto`

推荐使用flex, 就像推荐使用flex-grow设置主轴与换行一样
练习代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      /* 容器 */
      .container {
        width: 300px;
        height: 150px;
      }
      /* 将容器/父元素设置为flex容器 */
      .container {
        display: flex;
      }
      /* 项目/子元素 */
      .item {
        width: 100px;
        height: 50px;
        background-color: rgb(17, 0, 255);
        font-size: 1.5rem;
      }
      .item:first-of-type {
        background-color: rgb(255, 0, 0);
        /* 默认:不放大,允许收缩, 以项目的width为准 */
        flex: 0 1 auto;
        flex: 1 1 auto;
        /* flex: 0 1 80px; */
      }
      .item:nth-of-type(2) {
        background-color: rgb(255, 0, 255);
        flex: 0 100px;
      }
      .item:last-of-type {
        background-color: rgb(255, 0, 234);
        flex: auto;
        flex: 1;
        flex: none;
        flex: 0 0 auto;
        flex: 0 0 250px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

效果图：

总结：
本节课学习了flex 容器的设置属性，上节课学习到盒模型，本节课主要是设置盒子里面的样式，排序布局盒模型等

html学习：第9章 Flex弹性布局

flex 容器与项目

`display`属性

flex 容器与项目特征

1.flex 容器主轴方向

1.1 `flex-direction`属性

2.flex 容器主轴项目换行

2.1 `flex-wrap`属性

flex 容器主轴与项目换行简写

1. `flex-flow`属性

flex 容器主轴项目对齐

1. `justify-content`属性

flex 容器交叉轴项目对齐

1. `align-items`属性

flex 多行容器交叉轴项目对齐

1. `align-content`属性

flex 项目交叉轴单独对齐

1. `align-self`属性

flex 项目放大因子

1. `flex-grow`属性

flex 项目收缩因子

1. `flex-shrink`属性

flex 项目计算尺寸

1. `flex-basis`属性

flex 项目缩放的简写

1. `flex`属性

1.1 三值语法

1.2 双值语法

1.3 单值语法

相关文章

html学习：第9章 Flex弹性布局

flex 容器与项目

display属性

flex 容器与项目特征

1.flex 容器主轴方向

1.1 flex-direction属性

2.flex 容器主轴项目换行

2.1 flex-wrap属性

flex 容器主轴与项目换行简写

1. flex-flow属性

flex 容器主轴项目对齐

1. justify-content属性

flex 容器交叉轴项目对齐

1. align-items属性

flex 多行容器交叉轴项目对齐

1. align-content属性

flex 项目交叉轴单独对齐

1. align-self属性

flex 项目放大因子

1. flex-grow属性

flex 项目收缩因子

1. flex-shrink属性

flex 项目计算尺寸

1. flex-basis属性

flex 项目缩放的简写

1. flex属性

1.1 三值语法

1.2 双值语法

1.3 单值语法

相关文章

`display`属性

1.1 `flex-direction`属性

2.1 `flex-wrap`属性

1. `flex-flow`属性

1. `justify-content`属性

1. `align-items`属性

1. `align-content`属性

1. `align-self`属性

1. `flex-grow`属性

1. `flex-shrink`属性

1. `flex-basis`属性

1. `flex`属性