弹性盒布局

我是打工人

已于 2022-06-17 22:08:33 修改

阅读量1.8k

点赞数

文章标签： html css3

于 2022-03-10 08:18:49 首次发布

本文链接：https://blog.csdn.net/szydqq/article/details/123314195

版权

1.弹性元素

+ 从元素类型分类

=> 行内元素 inline

=> 块级元素 block

=> 行内块级元素 inline-block

=> 弹性元素 flex(弹性元素不弹自己, 弹儿子)

2.弹性盒子：是用来控制子元素的布局的。

约定:

+ 我们管写了 display: flex（形成弹性盒子的语句） 的元素叫做弹性父元素（容器）

+ 管写了 display: flex 的元素的直系子元素叫做弹性子元素（所有弹性盒子里面的子元素）

特点：

1.元素如果变成弹性盒子，里面的子元素默认会横向排列

2.当父元素变成弹性盒子之后。子元素无论是什么元素类型都能直接设置宽高

3.margin：auto是生效的

4.如果子元素总宽度大于父元素，那么是不会超出父盒子，也不会自动换行，而是会挤压。

3.当一个元素开启了弹性布局以后, 会在浏览器出现一些默认弹性情况

1. 会生成一条主轴

=> 主轴方向是从左到右

以下五点均是父元素身上的属性

①主轴到底在哪个方向需要我们去设定。

如果主轴为横向的，那么侧轴就是纵向的

如果主轴为纵向的，那么侧轴就是横向的。

元素默认情况下都是沿着主轴排列的。

② 如何设置主轴： flex-direction

row====将主轴设置为横向，元素会从左到右横向排列====默认值（常用）

row-reverse===元素会从右到左排列

column==将主轴设置为纵向，元素会从上到下纵向排列（常用）

column-reverse==从下到上排列

③.设置子元素在主轴的对齐方式:justify-content

flex-start===元素放在主轴的起点

flex-end===元素放在主轴的终点

center===元素放在主轴的中间====常用

space-between===元素的2端对齐（第一个和最后一个会贴边，中间元素间距自动分配）===常用

space-around===中间元素的间距是贴边元素间距的2倍===常用

space-evenly===元素与元素的间距完全是一样的

④设置子元素在侧轴（交叉轴）的对齐方式：align-items

flex-start====元素放在侧轴的起点

flex-end=====元素放在侧轴的终点

center=====元素放在侧轴的中间====常用

baseline===元素基线对齐（这个不做研究，大多数情况下和flex-start效果一样）

stretch====拉伸，要想看到效果子元素一定不能定宽度或者高度

如果侧轴在纵向，就不能定高度

如果侧轴在横向，就不能定宽度

⑤如何让子元素换行flex-wrap

nowrap===不换行，默认值

wrap===换行

wrap-reverse===反向换行

写在子元素身上的属性：

1.align-self====控制自己在侧轴上的对齐方式（想当都调整谁，就给谁写）

flex-end

center

baseline

stretch

2.order:排序，控制子元素的排列顺序，数字越大越往后排，默认0，支持负数

注意：不带单位

非必要不调整

3.flex:数字; 用来分配剩余空间的

4.flex-shrink：======元素是否挤压，一般用于制作移动端的横向滚动。

a)0=====不挤压

b)1=====挤压（默认值）

5.多行对齐方式（对于单行子元素，该属性不起作用。）align-content

flex-start===多行元素统一放在起点，行与行之间没有间距

flex-end===多行元素统一放在终点，行与行之间没有间距

center===多行元素统一放在中间，行与行之间没有间距

space-between===第一行和最后一行贴边，中间行间距自动分配

space-around====中间间距是贴边间距的2倍

2. 会生成一条侧轴

=> 侧轴方向是从上到下

=> 侧轴永远垂直于主轴

3. 弹性子元素在主轴方向上的排列方式

=> 默认从主轴开始方向向主轴结束方向排列

4. 尺寸问题

=> 当弹性子元素不设置宽高的时候

=> 主轴方向尺寸默认是元素内容的尺寸, 如果没有内容, 那么就是 0

=> 侧轴方向尺寸默认是侧轴长度, 父元素盒子长度

5. 弹性元素排列

=> 默认永不换行

=> 当子元素超出父元素范围的时候, 会默认挤压子元素内容区域

=> 当挤压到内容区域, 不能继续挤压的时候, 直接溢出父盒子

6. 允许换行以后, 会出现多条临时侧轴

=> 换多少行, 出现多少个临时侧轴

=> 多条临时侧轴的长度是一致的

4.书写在弹性父元素身上的样式

1. 主轴方向调整

=> 样式: flex-direction

=> 取值:

-> 默认: row 横向从左到右, 侧轴从上到下

-> row-reverse 横向从右到左, 侧轴从上到下

-> column 纵向从上到下, 侧轴从左到右

-> column-reverse 纵向从下到上, 侧轴从左到右

=> 注意:

-> 主轴可以有四种方向选择

-> 侧轴只能是从左到右或者从上到下

2. 元素在主轴上的排列方式

=> 样式: justify-content

=> 取值:

-> 默认: flex-start 把所有元素当做一个整体排列在主轴开始位置

-> flex-end 把所有元素当做一个整体排列在主轴的结束位置

-> center 把所有元素当做一个整体排列在主轴居中的位置

-> space-between 把所有元素空余位置均分放在每两个元素之间(6个元素, 5个空)

-> space-around 把所有元素空余位置均分放在每个元素的两边(6个元素, 12个空)

-> space-evenly 把所有元素空余位置坐一个绝对均分(6个元素, 7个空)

(注意: space-evenly, 安卓不好使, ios 好使)

3. 允许换行

=> 样式: flex-wrap

=> 取值:

-> 默认: no-wrap 不允许换行

-> wrap 允许换行

-> wrap-reverse 允许换行并反转

4. 当行时侧轴的排列方式

=> 样式: align-items

=> 取值:

-> 默认: flex-start 在侧轴开始排列

-> flex-end 在侧轴结束排列

-> center 在侧轴居中位置排列

=> 注意: 当弹性子元素是多行的时候, 这个样式是有效果的

-> 当多行的时候使用 align-items 是以每一个临时侧轴为基准进行位置调整

5. 多行时侧轴的排列方式

=> 样式: align-content

=> 取值:

-> flex-start 把所有行元素当做一个整体排列在整体侧轴开始位置

-> flex-end 把所有行元素当做一个整体排列在整体侧轴结束位置

-> center 把所有行元素当做一个整体排列在整体侧轴居中位置

-> space-between 把所有行空余位置均分放在每两行之间(3行, 2个空)

-> space-around 把所有行空余位置均分放在每行两边(3行, 6个空)

-> space-evenly 把所有行空余位置绝对均分(3行, 4个空)

=> 注意: 当弹性子元素为单行的时候, 这个样式是没有效果的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul {
      width: 1000px;
      height: 800px;
      background-color: skyblue;

      /* 开启弹性布局方式 */
      display: flex;

      /* 调整主轴方向 */
      /* flex-direction: column-reverse; */

      /* 元素在主轴方向上的排列方式 */
      justify-content: space-between;

      /* 主轴方向允许换行 */
      flex-wrap: wrap;

      /* 单行时侧轴排列方式 */
      align-items: flex-end;

      /* 多行时侧轴排列方式 */
      /* align-content: space-evenly; */
    }

    li {
      width: 100px;
      height: 100px;
      background-color: pink;
      font-size: 50px;
      line-height: 100px;
      color: #fff;
      text-align: center;
    }
  </style>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
  </ul>


</body>
</html>

效果图：

弹性子元素相关样式

弹性子元素相关的样式

1. 单独调整自己在侧轴上的排列位置

=> 多行的时候, 是单独调整自己在单独侧轴上的排列方式

=> 样式: align-self

=> 取值:

-> flex-start 自己放在侧轴的开始

-> flex-end 自己放在侧轴的结束

-> center 自己放在侧轴的中间

2. 元素顺序排列

=> 样式: order

=> 取值: 一个数字, 数字越大越靠后

3. 元素的默认尺寸设置

=> 样式: flex

=> 取值: 一个数字, 按比例计算

=> 计算方式

-> 当你给多个元素设置了 flex 样式以后

-> 首先计算非固定尺寸以外的数据(以下面结构为例, 剩余尺寸是 600)

-> 计算所有带有 flex 样式的元素的总和作为基数(以下面结构为例, flex 总基数就是 30)

-> 按照每一个元素的 flex 份数开始分配总剩余空间

+ 以下面结构为例

+ 2号元素就占据 600 的 8/30

+ 4号元素就占据 600 的 22/30

=> 注意:

-> 当我们不开启换行的时候, 元素如果超出父元素范围, 会挤压元素

-> 当你有了 flex 的元素, 会优先挤压

-> 挤压到 flex 的元素不能继续挤压了, 才会开始去挤压固定宽度元素

4. 是否允许挤压元素

=> 样式: flex-shrink

=> 取值: 0 or 1

-> 0 表示不参与压缩

-> 1 表示参与压缩

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul {
      width: 1000px;
      height: 800px;
      background-color: skyblue;

      margin: 50px auto;

      display: flex;

      /* 侧轴方向上的排列 */
      align-items: center;

      /* flex-wrap: wrap; */
    }

    li {
      width: 100px;
      height: 100px;
      background-color: pink;
      font-size: 40px;
      color: #fff;
      /* display: flex;
      justify-content: center;
      align-items: center; */

      line-height: 100px;
      text-align: center;
    }

    /* 单独调整每一个元素自己在侧轴上的位置 */
    /* li:nth-child(2) {
      align-self: flex-start;
    }

    li:nth-child(5) {
      align-self: flex-end;
    } */


    /* li:nth-child(3) {
      order: 9999;
    } */


    li:nth-child(2) {
      /* 表示 2号 li 元素不参与压缩 */
      flex-shrink: 0;
    }
  </style>
</head>
<body>


  <ul>
    <!-- <li style="width: 100px;">1</li>
    <li style="flex: 4;">2</li>
    <li style="width: 100px;">3</li>
    <li style="width: 100px;">4</li>
    <li style="flex: 6;">5</li>
    <li style="width: 100px;">6</li> -->

    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
  </ul>
</body>
</html>