备案控制台
开发者社区 云计算 文章 正文

Flex实现栅格布局

2022-06-30 203
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Flex实现栅格布局

引导：清除浮动带来的影响

如果不清除浮动就会带来一系列影响，需要在父盒子里加上overflow：hidden属性（或者其他清除浮动的方式）


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            /*overflow: hidden;*/
        }
        .son{
            width: 100px; 
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    父盒子垮掉了
</body>
</html>


下面的栅格布局可以直接排列盒子不带来影响


一、flex伸缩（弹性）布局


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            /* 1. 把父盒子设置成伸缩盒布局
                特征：子元素默认水平排列
            */
            display: flex;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>


二、flex伸缩布局的方向

  • 特征：子元素默认水平排列


  • 竖直flex方向


flex-direction: row;


  • 竖直flex方向


flex-direction: column ;


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            /* 1. 把父盒子设置成伸缩盒布局
                特征：子元素默认水平排列
            */
            display: flex;
            /* 2. flex方向 */
            flex-direction: column ;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <span>行内</span>
        <span>行内</span>
    </div>
</body>
</html>


三、水平垂直居中

传统布局（回顾）



<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            width: 500px;
            height: 500px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
            position: absolute;
            left: 50%;
            top:50%;
            /*margin-left: -50px;*/
            /*margin-top: -50px;*/
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">盒子</div>
    </div>
</body>
</html>


flex布局


  • 主轴对其


justify-content: center;


  • 交叉轴对其


align-items: center;


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">盒子</div>
    </div>
</body>
</html>


四、flex换行排列

用 flex-wrap: wrap


图例



<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            border: 1px solid #f00;
            width: 750px;
            height: 1000px;
            margin: 0 auto;
        }
        .nav{
            display: flex;
            /* 伸缩盒换行 */
            flex-wrap: wrap;
        }
        .item{
            width: 20%;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="nav">
            <div class="item">分类</div>
            <div class="item">大聚惠</div>
            <div class="item">苏宁超市</div>
            <div class="item">红孩子母婴</div>
            <div class="item">服装城</div>
            <div class="item">爆款手机</div>
            <div class="item">赚钱</div>
            <div class="item">领云钻</div>
            <div class="item">身边苏宁</div>
            <div class="item">生活家电</div>
        </div>
    </div>
</body>
</html>


五、案例：本地宝界面

传统浮动实现



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .slider img {
            width: 100%;
            /*width: 375px;*/
        }
        .index-nav ul {
            overflow: hidden;
        }
        .index-nav li {
            width: 33.33333%;
            height: 100px;
            border: 1px solid #ccc;
            text-align: center;
            float: left;
            box-sizing: border-box;
        }
        .index-nav li img {
            width: 40px;
            margin-top: 18px;
        }
        .index-nav li p {
            font-size: 14px;
            color: #333;
        }
        .index-enter {
            height: 200px;
            text-align: center;
            padding-top: 20px;
            font-size: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="assets/images/banner-01.png" alt="">
    </div>
    <div class="index-nav">
        <ul>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-01.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-02.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-03.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-04.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-05.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-06.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-07.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-08.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-09.png" alt="">
                    <p>美食</p>
                </a>
            </li>
        </ul>
    </div>
    <div class="index-enter">
        首页入口
    </div>
</body>
</html>


flex布局实现



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .slider img {
            width: 100%;
            /*width: 375px;*/
        }
        .index-nav li{
            width: 33.33333%;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        /*ul是栅格布局*/
        .index-nav ul {
             /* 5. 给当前父元素设置成伸缩盒模式 */
            display: flex;
            /* 6. 设置子元素换行能排列 */
            flex-wrap: wrap;
        }
        /*li里面的元素也是栅格布局*/
        .index-nav li a{
            height: 100px;
            /* 1. 给当前父元素设置成伸缩盒模式 */
            display: flex;
            /* 2. 设置垂直排列 */
            flex-direction: column;
            /* 3.设置主轴居中 */
            justify-content: center;
            /* 4.设置交叉轴居中 */
            align-items: center;
        }
        .index-nav li img {
            width: 40px;
        }
        .index-nav li p {
            font-size: 16px;
            color: #444;
        }
        .index-enter {
            height: 200px;
            text-align: center;
            padding-top: 20px;
            font-size: 40px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="assets/images/banner-01.png" alt="">
    </div>
    <div class="index-nav">
        <ul>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-01.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-02.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-03.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-04.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-05.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-06.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-07.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-08.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-09.png" alt="">
                    <p>美食</p>
                </a>
            </li>
        </ul>
    </div>
    <div class="index-enter">
        首页入口
    </div>
</body>
</html>
流楚丶格念
目录
相关文章
_长银_
|
3月前
flex布局
flex布局
_长银_
26 0
叫我兔兔酱
|
29天前
|
开发者
【干货分享】Grid 布局和 Flex 布局
【干货分享】Grid 布局和 Flex 布局
叫我兔兔酱
14 0
阿珊和她的猫
|
4月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局（三）
CSS布局模式之Flex布局&Grid布局
阿珊和她的猫
42 0
晚来南风晚相识
|
4月前
flex 布局子元素被挤压的问题
flex 布局子元素被挤压的问题
晚来南风晚相识
80 0
東方幻想鄉
|
5月前
解决flex布局最后一行(左靠齐)
解决flex布局最后一行(左靠齐)
東方幻想鄉
26 0
__爱吃香菜
|
9月前
|
容器
Flex布局是什么？
Flex布局是什么？
__爱吃香菜
31 0
困困的小熊猫
|
9月前
|
开发者 容器
Flex基础布局
Flex基础布局
困困的小熊猫
51 0
前端杂货铺
|
11月前
|
容器
Flex 布局
Flex 布局
前端杂货铺
41 0
Web技术学苑
|
前端开发 JavaScript
flex给我实现一个对角线布局
flex在css布局中的是一个经常考察的知识点，虽然垂直居中问题已经问得快烂大街了，flex你虽然总是在用，但是总会有你不知道的盲点
Web技术学苑
290 0
flex给我实现一个对角线布局
黛琳ghz
|
前端开发 容器
移动端布局——flex布局下的居中对齐方式
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
黛琳ghz
259 0
移动端布局——flex布局下的居中对齐方式