flex布局应用场景

最新推荐文章于 2024-05-23 01:28:45 发布

weixin_42554311

最新推荐文章于 2024-05-23 01:28:45 发布

阅读量3.4k

点赞数 4

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42554311/article/details/88180738

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

flex布局应用场景

（一）骰子布局参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

（二）网格布局

（1）基本网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，骰子布局很像，但是需要设置项目的自动缩放。

实现效果如下自适应的布局，随着窗口放大缩小布局方式不变。

（2）百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

实现原理与上面的类似，只是具体百分比的值需要这样设置：flex: 0 0 33.3333%;

（三）圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

两边固定中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .HolyGrail {
            display: flex;
            flex-direction: column;
        }

        header,
        footer {
            flex: 1;
            height:100px;
            text-align: center;
            background-color: #9c9c9c;
        }

        .HolyGrail-body {
            height:500px;
            display: flex;
            flex: 1;
        }

        .HolyGrail-content {
            flex: 1;
            text-align: center;
            background-color: #ccc;
        }
        .HolyGrail-ads{
            background-color: #ff5400;
        }
        .HolyGrail-nav{
            background-color: #0bbbee;
        }
        .HolyGrail-nav, .HolyGrail-ads {
            text-align: center;
            /* 两个边栏的宽度设为12em */
            flex: 0 0 12em;
        }

        .HolyGrail-nav {
            /* 导航放到最左边 */
            order: -1;
        }
    </style>
</head>
<body>
<div class="HolyGrail">
    <header>头部</header>
    <div class="HolyGrail-body">
        <main class="HolyGrail-content">中间部分</main>
        <nav class="HolyGrail-nav">left导航部分</nav>
        <aside class="HolyGrail-ads">右侧部分</aside>
    </div>
    <footer>底部</footer>
</div>
</body>
</html>

(四)流式布局（常用）

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            width: 200px;
            display: flex;
            flex-flow: row wrap;
            background-color: black;
        }
        .child{
            background-color: white;
            flex: 0 0 25%;
            height: 50px;
            border: 1px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
</div>
</body>
</html>

（五）固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .Site {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            border:1px solid red;
        }
        .header,.Site-content,.bottom{
            text-align: center;
        }
        .header{
             height:100px;
            background-color: #9c9c9c;
         }
        .Site-content {
            flex: 1;
            background-color: #ccc;
        }
        .bottom{
            height:100px;
            border:1px solid red;
            background-color: #9c9c9c;

        }
    </style>
</head>
<body class="Site">
<header class="header">头部</header>
<main class="Site-content">重要区域</main>
<footer class="bottom">底部</footer>
</body>
</html>

（六）悬挂式布局

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .Media {
            width:400px;
            display: flex;
            align-items: flex-start;
            border:1px solid red;
        }

        .Media-figure {
            margin-right: 1em;
        }

        .Media-body {
            flex: 1;
        }
    </style>
</head>
<body>
<div class="Media">
    <img class="Media-figure" src="https://profile.csdnimg.cn/1/C/4/1_weixin_42554311" alt="">
    <p class="Media-body">文字内容</p>
</div>
</body>
</html>

weixin_42554311

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
flex布局应用场景

flex布局应用场景（一）骰子布局参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html（二）网格布局（1）基本网格布局最简单的网格布局，就是平均分布。在容器里面平均分配空间，骰子布局很像，但是需要设置项目的自动缩放。实...
复制链接

扫一扫