2021-08-01

最新推荐文章于 2024-08-10 17:13:35 发布

weixin_56706590

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量74

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_56706590/article/details/119299519

弹性盒

flex(弹性盒、伸缩盒)
①是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
②是flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

1. 弹性容器

（1）要使用弹性盒，必须先将一个元素设置为弹性容器
（2）我们通过 display 来设置弹性容器
① display:flex 设置为块级弹性容器
② display:inline-flex 设置为行内的弹性容器
（3)flex-direction 指定容器中弹性元素的排列方式
可选值：
row 默认值，弹性元素在容器中水平排列（左向右）
- 主轴自左向右
row-reverse 弹性元素在容器中反向水平排列（右向左）
- 主轴自右向左
column 弹性元素纵向排列（自上向下）
- 主轴自上向下
column-reverse 弹性元素方向纵向排列（自下向上）
- 主轴自下向上

主轴：
弹性元素的排列方式称为主轴
侧轴

2.弹性元素

(1)弹性容器的子元素是弹性元素（弹性项）
(2)弹性元素可以同时是弹性容器
(3)弹性元素的属性：
① flex-grow 指定弹性元素的伸展的系数
- 当父元素有多余空间时，子元素如何伸展
② flex-shrink 指定弹性元素的收缩系数
- 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩

再做导航条

<!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>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .nav{
            width: 1210px;
            height: 48px;
            line-height: 48px;
            margin: 50px auto;
            background-color: #E8E7E3;
            /* 设置为弹性容器 */
            display: flex;
          
        }

        .nav li{
            /* 设置增长系数 */
            flex-grow: 1;
        }

        .nav a{
            display: block;
            color: #808080;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
        }

        .nav a:hover{
            background-color: #636363;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>
    </ul>
</body>
</html>

在这里插入图片描述

弹性容器的样式

1. flex-wrap

设置弹性元素是否在弹性容器中自动换行
- 可选值：
① nowrap 默认值，元素不会自动换行
② wrap 元素沿着辅轴方向自动换行
③ wrap-reserve 元素沿着辐轴反方向换行

2.justify-content

如何分配主轴上的空白空间（主轴上的元素如何排列）
- 可选值：
① flex-start 元素沿着主轴起边排列
② flex-end 元素沿着主轴终边排列
③ center 元素居中排列
④ space-around 空白分布到元素两侧
⑤ space-between 空白均匀分布到元素间
⑥ space-evenly 空白分布到元素的单侧

3.align-items

元素在辅轴上如何对齐
元素间的关系
- 可选值：
① stretch 默认值，将元素的长度设置为相同的值
② flex-start 元素不会拉伸，沿着辅轴起边对齐
③ flex-end 沿着辅轴的终边对齐
④ center 居中对齐
⑤ baseline 基线对齐

4. align-content: 辅轴空白空间的分布

5. align-self: 用来覆盖当前弹性元素上的align-items

弹性元素的样式

1.flex-grow：弹性的增长系数

2.flex-shrink：弹性元素的缩减系数

① 缩减系数的计算方式比较复杂
② 缩减多少是根据缩减系数和元素大小来计算

3.flex-basis：元素基础长度

flex-basis 指定的是元素在主轴上的基础长度
如果主轴是横向的则该值指定的就是元素的宽度
如果主轴是纵向的则该值指定的就是元素的高度
- 默认值是 auto，表示参考元素自身的高度或宽度
- 如果传递了一个具体的数值，则以该值为准

4. flex 可以设置弹性元素所有的三个样式

flex 增长缩减基础；
initial “flex: 0 1 auto”
auto “flex: 1 1 auto”
none “flex: 0 0 auto” 弹性元素没有弹性

5.order：决定弹性元素的排列顺序

淘宝导航

<!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;
        }

        /* 设置外层的容器 */
        .nav{
            width: 60%;
        }

        /* 设置每一行的容器 */
        .nav-inner{
            /* 设置为弹性容器 */
            display: flex;
            /* 设置主轴上空白的分布 */
            justify-content: space-around;
        }

        .item{
            width: 8%;
            /* background-color: #bfa; */
            /* flex: auto; */
        }

        .item img{
            /* 设置图片的宽度和父元素宽度一样 */
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- 创建一个外层的容器 -->
    <nav class="nav">
        <div class="nav-inner">
            <div class="item">
                <a href="#">
                    <img src="img/16/1.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/2.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/3.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/4.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/5.png">
                </a>
            </div>
        </div>
        <div class="nav-inner">
            <div class="item">
                <a href="#">
                    <img src="img/16/6.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/7.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/8.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/9.png">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/10.png">
                </a>
            </div>
        </div>
        </div>
    </nav>
</body>
</html>