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

使用flex布局实现,7种经典布局案例

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

flex的基础知识

基础概念可以参考： https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html


1.两列布局

效果

1dc618a0ed9580ce8bfa6facb208c08f.png

代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            height: 200px;
        }
        .left {
            background-color: yellow;
            /* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 */
            flex-basis: 200px;
            /* flex-grow定义该项目不分配剩余空间 */
            flex-grow: 0;
        }
        /*.center {*/
        /*    background-color: red;*/
        /*    !* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *!*/
        /*    flex-basis: 500px;*/
        /*    !* flex-grow定义该项目不分配剩余空间 *!*/
        /*    flex-grow: 0;*/
        /*}*/
        .main {
            background-color: green;
            /* flex-grow定义main占满剩余空间 */
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
<!--        <div class="center">center</div>-->
        <div class="main">main</div>
    </div>
</body>
</html>


2.水平/垂直居中

效果:

5d4c6812c8535adbb050f4ddf2e1bce8.png

代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平/垂直居中</title>
    <style>
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
            width: 500px;
            background-color: green;
        }
        .content {
            height: 200px;
            width: 200px;
            background-color: yellow;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="content">我是子元素，我要垂直居中</div>
</div>
</body>
</html>


3.两栏/三栏布局

效果:

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

coding:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏/三栏布局</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        display: flex;
        height: 200px;
        margin-bottom: 30px;
    }
    .left {
        background-color: yellow;
        flex-basis: 200px;
        /* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 */
        flex-grow: 0;
        /* flex-grow定义该项目不分配剩余空间 */
    }
    .main {
        background-color: green;
        flex-grow: 1;
        /* flex-grow定义main占满剩余空间 */
    }
    .right {
        background-color: blue;
        flex-basis: 100px;
        flex-grow: 0;
    }
</style>
<body>
<div class="box">
    <div class="left">left</div>
    <div class="main">main</div>
</div>
<div class="box">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>
</body>
</html>


4.等分宽高

66ba272a0bfc97be54a5fa679e3d5482.png

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等分宽高</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    nav {
        display: flex;
    }
    a {
        flex-grow: 1;
        font-size: 30px;
        text-decoration: none;
        text-align: center;
    }
    nav a:nth-child(odd){
        background: pink;
    }
    nav a:nth-child(even){
        background: goldenrod;
    }
</style>
<body>
<nav>
    <a href="#">中</a>
    <a href="#">华</a>
    <a href="#">人</a>
    <a href="#">民</a>
    <a href="#">共</a>
    <a href="#">和</a>
    <a href="#">国</a>
</nav>
</body>
</html>


5.圣杯布局

效果:

1dc618a0ed9580ce8bfa6facb208c08f.png

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 500px;
        background-color: yellow;
        text-align: center;
        font-size: 30px;
        min-height:100vh;
    }
    header, footer {
        flex: 0 0 80px;
        line-height: 80px;
        background: pink;
    }
    .content {
        display: flex;
        flex: 1;
    }
    nav {
        order: -1;
        background-color: blue;
        flex: 0 0 80px;
    }
    aside {
        background-color: green;
        flex: 0 0 80px;
    }
    main {
        flex: 1;
    }
</style>
<body>
    <div class="box">
        <header>header</header>
        <div class="content">
            <main>main</main>
            <nav>nav</nav>
            <aside>aside</aside>
        </div>
        <footer>footer</footer>
    </div>
</body>
</html>


6.流式布局

效果:

5d4c6812c8535adbb050f4ddf2e1bce8.png

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流式布局</title>
</head>
    <style>
        .box {
            display: flex;
            flex-flow: row wrap;
            height: 300px;
            width: 400px;
            background-color: yellow;
        }
        .content {
            flex: 0 0 25%;
            background-color: blue;
            border: 2px solid red;
            box-sizing: border-box;
        }
    </style>
<body>
    <h1>10个</h1>
    <div class="box">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
</body>
</html>


7.基于flex的响应式布局

效果图

屏幕尺寸大于640px

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

高度不够4个盒子的总和时

66ba272a0bfc97be54a5fa679e3d5482.png

屏幕尺寸小于640px时

88b9988b40447cb37c7e3c492d49867f.png

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结合响应式布局的综合运用</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .box div {
        width: 150px;
        padding: 20px;
    }
    .box1 {
        height: 120px;
        background-color: red;
    }
    .box2 {
        height: 100px;
        background-color: blue;
    }
    .box3 {
        height: 40px;
        background-color: pink;
    }
    .box4 {
        height: 200px;
        background-color: yellow;
    }
    @media (min-width: 640px) {
        .box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }
    @media (max-width: 640px) {
        .box {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .box4 {
            order: -1;
        }
    }
</style>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>
</body>
</html>
关键词：
flex布局
怒放de生命
目录
相关文章
凉凉心.
|
3月前
|
前端开发 算法 Java
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
凉凉心.
158 1
凉凉心.
|
3月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
322 1
全栈若城
|
7月前
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南：Flex多行布局详解
在现代移动应用开发中，流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度，在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表，重点关注多行布局与对齐策略的应用。
全栈若城
268 2
全栈若城
|
7月前
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐：从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中，Flex容器提供了强大而灵活的对齐系统，使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术，是构建专业级用户界面的关键。
全栈若城
250 0
全栈若城
|
7月前
|
UED 容器
5.HarmonyOS Next开发宝典：掌握Flex布局的艺术
Flex布局（弹性布局）是HarmonyOS Next中最强大的布局方式之一，它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示，还是复杂的自适应界面，Flex布局都能轻松应对。
全栈若城
258 0
程序员一鸣
|
10月前
|
开发者 容器
鸿蒙开发：弹性布局Flex
在实际的开发中，需要掌握主轴与交叉轴的关系、换行规则及子元素属性，同时注意性能与兼容性问题，还有一点，Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
程序员一鸣
290 10
鸿蒙开发：弹性布局Flex
全栈若城
|
7月前
|
UED 容器
10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中，Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器，我们可以创建复杂而灵活的界面结构，满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局，以及如何合理分配和控制空间。
全栈若城
202 0
那年春天
|
前端开发 容器
flex布局
【10月更文挑战第7天】
那年春天
302 87
那年春天
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
那年春天
1475 57
我是快乐的嘟嘟
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
616 34