打开APP
userphoto
未登录

开通VIP，畅享免费电子书等14项超值服

开通VIP

首页

好书

留言交流

下载APP

联系客服
Flex实现栅格布局
userphoto 关注

文章目录

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


如果不清除浮动就会带来一系列影响，需要在父盒子里加上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>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。
打开APP，阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序，算一算2024你的财运
HTML 实现仿 Windows 桌面主题特效
用flex布局实现栅格系统
flew弹性布局
flex布局实例--实现底部导航
web前端开发面试题分享，值得一看
20 个超级实用的 CSS 技巧，帮助你成为更好的开发者
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权！
如果VIP功能使用有故障，
可点击这里联系客服！

联系客服