Web前端知识CSS（弹性盒子）_web盒子怎么顶端-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_72686827/article/details/126405838

弹性盒子重点

1、什么是弹性盒子？

弹性盒子是CSS3的一种新的布局模式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配
- 操作方便，布局简单，移动端使用广泛
- PC端浏览器支持情况较差
- IE11或更低版本中，不支持或部分支持
- 在盒模型中较为灵活
弹性盒模型的内容包括：弹性容器、弹性子元素——项目
原理：为父元素设置flex属性，控制子元素的位置及排列方式
应用场景 : 移动端

2、设置弹性盒子——display属性

display: flex; 将对象作为块级弹性伸缩盒显示
display: inline-flex; 将对象作为内联块级弹性伸缩盒显示
注意：

将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效

弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

3、基本概念

flex容器、项目——弹性子元素
默认在容器中有两根轴线
- 默认主轴方向——x轴方向，水平向右（左侧为主轴起点，右侧为主轴终点）
- 默认交叉轴方向——y轴方向，水平向下（上方为交叉轴起点，下方交叉轴终点）
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外一边就是侧轴

4、容器属性——添加弹性容器上

flex-direction属性：设置主轴的方向，子元素的排列方向

flex-direction: row; 默认值，主轴方向为水平方向，起点在左端
flex-direction: row-reverse; 主轴方向为水平方向，起点在右端
flex-direction: column; 主轴方向为垂直方向，起点在上方
flex-direction: 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>
        * {
            margin: 0;
            padding: 0;
        }

        .warp,
        .warp1 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* 设置弹性盒*/
            display: flex;
        }

        div {
            width: 100px;
            height: 100px;
        }

        /* X为主轴 */
        .warp {
            flex-direction: row;
            flex-direction: row-reverse;
        }

        /* Y为主轴 */
        .warp1 {
            flex-direction: column;
            flex-direction: column-reverse;
        }

        .warp .box1 {
            background-color: red;
        }

        .warp .box2 {
            background-color: pink;
        }


        .warp1 .box1 {
            background-color: purple;
        }

        .warp1 .box2 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="warp">
        <div class="box1">box1</div>
        <div class="box2">box2</div>

    </div>
    <hr>
    <div class="warp1">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>

</html>

justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,

justify-content: flex-start; 默认值，主轴顶端对齐
justify-content: flex-end; 主轴的末端对齐
justify-content: center; 居中对齐，子元素位于弹性容器的中心
justify-content: space-between; 两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。
justify-content: space-around; 四周对齐，子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。
justify-content: space-evenly;平均对齐弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等

 /* X为主轴 */
.warp {
          /* 设置弹性盒*/
            display: flex;
         flex-direction: row;
         justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;
            justify-content: space-between;
            justify-content: space-around;
            justify-content: space-evenly;
        }

        /* Y为主轴 */
        .warp1 {
            /* 设置弹性盒*/
            display: flex;
            flex-direction: column;
            
            justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;
            justify-content: space-between;
            justify-content: space-around;
            justify-content: space-evenly;
        }

align-items属性：弹性子元素在（侧轴）交叉轴上的对齐方式

align-items: stretch; 默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度
align-items: flex-start;子元素在侧轴顶端对齐
align-items: flex-end; 子元素在侧轴末端对齐
align-items: center; 子元素在侧轴中间对齐
align-items: baseline; 子元素在第一行文字的基线对齐

.warp {
            /* 设置弹性盒*/
            display: flex;
            flex-direction: row;

            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
            align-items: stretch;(height: auto;)
        }


 /*   align-items: baseline; */
  <style>

        /*   align-items: baseline; */
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
            display: flex;
            align-items: baseline;
            margin: 50px auto;
        }

        .box span {
            width: 100px;
            height: 100px;
            background-color: red;
            font-size: 20px;
            color: #fff;
        }

        .box img {
            height: 150px;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>XJX</span>
        <img src="../img/bg1.jpg" alt="">
    </div>
</body>

</html>

5、弹性盒水平垂直居中

- 水平垂直居中的元素的父元素上设置相关属性
    - display: flex;
    - justify-content: center; 主轴上子元素的对齐方式
    - align-items: center; 交叉轴上子元素的对齐方式

    <style>
        .wrap {
            width: 400px;
            height: 400px;
            background-color: chartreuse;
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;

        }

        .wrap div {
            width: 100px;
            height: 100px;
            background-color: pink;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div>绝对居中</div>
    </div>
</body>
</html>

6、容器属性——添加弹性容器上

flex-wrap属性：指定弹性盒子的子元素换行方式
- flex-wrap: wrap; 换行，第一行显示在上方
- flex-wrap: wrap-reverse; 换行，第一行显示在下方
- flex-wrap: nowrap; 默认值，不换行
注意：父元素有固定高度且高度大于子元素换行后高度之和换行中间有缝隙

父元素高度有内容撑开换行没有缝隙
align-content属性：折行,行与行之间有间隙,去除间隙（去掉了中间的间隙）

要设置： flex-wrap: wrap;
- align-content: flex-start; 顶端没有行间距
- align-content: flex-end; 底对齐没有行间距
- align-content: center; 居中没有行间距
- align-content: space-between; 两端对齐，中间自动分配, 元素位于各行之间留有空白空间
- align-content: space-around; 自动分配距离，元素位于各行之前、之间、之后都留有空白空间, 中间的间距是两端间距的两倍,
- align-content: space-evenly;平均对齐，元素位于各行之前、之间、之后都留有空白空间，行间距自动分配间距相等
```
 .warp {
          display: flex;
            /* 设置后没有间隙 上端 下端*/
            align-content: flex-start;
            align-content: flex-end;
      
            /* 设置后没有间隙 中间*/
            align-content: center;
            /* 自动分配距离 */
            align-content: space-around;
            /* 两端对齐，中间自动分配 */
            align-content: space-between;
            /* 行间距自动分配 间距相等*/
            align-content: space-evenly;
        }
```

7、项目属性——写在弹性子元素上

flex属性：剩余空间的分配

应用场景 : 两、三栏自适应

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 500px;
            background-color: chartreuse;
            display: flex;
        }

        .box p:nth-child(1),
        .box p:nth-child(3) {
            width: 200px;
            height: 480px;
            background-color: red;
        }

        .box p:nth-child(2) {
            /* 中间剩余空间分配 */
            flex: 1;
            height: 480px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>左边</p>
        <p>中间</p>
        <p>右边</p>
    </div>
</body>

</html>

复合写法

flex-flow:flex-direction  flex-wrap;
例：
flex-floe:cloumn wrap;

align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）

此属性和弹性容器的 align-items 属性作用相同

align-self: stretch; 如果弹性子元素没有高度或高度为auto，将占满整个容器的高度
align-self: flex-start;（侧轴）交叉轴起点对齐
align-self: flex-end; （侧轴）交叉轴终点对齐
align-self: center; （侧轴）交叉轴中点对齐

.warp .box1 {
            height: auto;
            background-color: red;
            align-self: auto;
            align-self: stretch;
        }

        .warp .box2 {
            background-color: pink;
            align-self: flex-start;
            align-self: flex-end;
        }

        .warp .box3 {
            background-color: brown;
            align-self: center;
        }

order属性；子元素的排列次序

属性值为数值，没有单位，默认数值为0，数值越小，排列越靠前
必须为整数，不能为小数，可以为负数

 .warp .box1 {
            background-color: red;
            order: 1;
        }

        .warp .box2 {
            background-color: pink;
            order: 0;
        }

        .warp .box3 {
            background-color: brown;
            order: -1;
        }

flex-grow属性：子元素的放大比例（子项宽度和<父盒子宽度的时候）

属性值为数值，没有单位，默认值为0，表示不放大
负值对该属性无效
可以为小数
注意：当容器有剩余空间时有效

 .warp {
            width: 400px;
            height: 400px;
            display: flex;
        }

        .warp div {
            width: 100px;
            height: 100px;
        }

        /* 剩余空间400-300=100 */
        .box1 {
            background-color: red;
            flex-grow: 2;
            /* 100+100*2/4 = 150 */
        }
        .box2 {
            background-color: pink;
            flex-grow: 1;
            /* 100+100*1/4=125 */
        }

        .box3 {
            background-color: brown;
            /* 100+100*1/4=125 */
            flex-grow: 1;
        }

flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）
- 属性值为数值，没有单位
- 默认值为1，表示当空间不足时，等比例缩小
- 属性值为0，表示当空间不足时，不缩小
- 负值对该属性无效

可以为小数

  .warp {
            width: 500px;
            height: 400px;
            display: flex;
        }
        .warp div {
            width: 200px;
            height: 100px;
        }
        /*不足空间，缺了100 600-500=100*/
        .box1 {
            background-color: red;
            flex-shrink: 2;
            /*200 - 100 * 1/4 = 150 */
        }
        .box2 {
            background-color: pink;
            flex-shrink: 1;
            /*200 - 100 * 1/4 = 175*/
        }
        .box3 {
            background-color: brown;
            flex-shrink: 1;
            /*200 - 100 * 1/4 = 175*/
        }