HTML入门（flex拆行）————DAY6

最新推荐文章于 2024-08-15 16:53:51 发布

好吃的都给你呀

最新推荐文章于 2024-08-15 16:53:51 发布

阅读量1k

点赞数

分类专栏：前端杂文文章标签： HTML flex 折行换行

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102610769

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

flex元素是一种类似于float让div元素在所属框内更好的找到自己应该在的位置。

但是flex默认的里面的盒元素是不会自己进行折行的，所以需要进行一些设置，来得到更好的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #s1{
            /* 选用flex布局方式 */
            display: flex;
            width: 600px;
            height: 400px;
            border:3px solid pink;

            /* flex 布局默认不能折行，需要换行时需要主动设置换行*/
            /* wrap:在必要的时候进行拆行
            链接：https://www.runoob.com/cssref/css3-pr-flex-wrap.html */
            flex-wrap: wrap;
            /* 在弹性盒对象的 <div> 元素中的各项周围留有空白： 效果其实就是让div尽量平均往中间分布*/
            justify-content: center;
            /* 使div元素都居中对齐 */
            align-items: center;

            text-align: center;
        }
        .box{
            margin:30px;
            padding: 15px;
            width: 30px;
            height: 20px;
            border:3px solid greenyellow;
            /* 减去设定好的内边距和边框的距离，得到真实的大小
            链接：https://www.w3school.com.cn/cssref/pr_box-sizing.asp */
            box-sizing: border-box;
        }
        .hide1{
            /* 规定元素是否可见
            链接：https://www.w3school.com.cn/cssref/pr_class_visibility.asp */
            visibility: hidden;
        }
        .bottom{
            /* 贴近所属框的下面 */
            /* 链接：https://www.runoob.com/cssref/css3-pr-align-self.html */
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <section id="s1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box bottom">10</div>
        <div class="box hide1">11</div>
        <div class="box hide">12</div>
    </section>
</body>
</html>