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

已于 2022-09-02 08:22:31 修改
阅读量5k 收藏 78
点赞数 10
CC 4.0 BY-SA版权
分类专栏： 大前端 # 前端项目 # web前端开发 文章标签： css css3 html
于 2022-09-01 21:22:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_21349635/article/details/126651465

flex常见布局案例

flex的基础知识

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

1.两列布局

效果
在这里插入图片描述
代码:

<!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.水平/垂直居中

效果:
在这里插入图片描述
代码:

<!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.两栏/三栏布局

效果:
在这里插入图片描述
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.等分宽高

在这里插入图片描述
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.圣杯布局

效果:
在这里插入图片描述
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.流式布局

效果:
在这里插入图片描述

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
在这里插入图片描述
高度不够4个盒子的总和时
在这里插入图片描述
屏幕尺寸小于640px时
在这里插入图片描述
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>

参考:
https://www.bookstack.cn/read/css-grid-flex/flex-README.md

完，大功告成！

FLEX布局实例
jierenjia的博客
04-28 880
大家好，我是IT修真院郑州分院第8期学员，一枚正直善良的web程序员。今天给大家分享一下，修真院官网css5任务中可能会使用到的知识点：FLEX布局实例1.背景介绍2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。2.知识剖析采用 Flex 布局的元素，称为 Flex ...
flex布局教程的实例
11-20
嗯 关于廖雪峰老师网站的学习笔记---flex弹性盒子实例篇
Flex 布局教程：实例篇
weixin_30409849的博客
09-03 3399
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节...
CSS- flex布局原理及其案例
zzxhahaha的博客
01-15 554
提示：简单的学习掌握FLEX布局** 文章目录前言一、flex设置主轴方向1：说明：2：代码3:实例展示二、主轴排序方式1：说明2.代码3. 实例展示三，换行1：说明2:代码3:实例展示四, 侧轴排序方式1:说明2：代码3:结果五：份数1：说明2：代码3 案例展示 前言 Flex布局原理就是： 给父盒子添加flex属性， 来控制子盒子的位置排 列方式从而实现flex布局 当我们为父盒子设为 flex 布局以后， 子元素的 float、 clear 和 vertical-align 属性将失效。
CSS 属性详解：justify-content
最新发布
weixin_43991457的博客
06-06 560
CSS justify-content 属性详解 justify-content 是 Flexbox 布局的关键属性，用于控制子元素在主轴方向的对齐方式。主要包括以下常用值： flex-start/flex-end：左/右对齐 center：居中对齐 space-between：两端对齐，中间等距 space-around：每个项目两侧等距 space-evenly：完全等距分布 该属性必须配合display:flex使用，适用于导航菜单布局、按钮组对齐等各种需要精确控制元素排列的场景。通过合理选择取值，可
flex布局实例
黑胡子大叔的博客
07-14 727
flex布局实例
flex 布局案例
一抹茶-CSDN的博客
05-26 658
1.无flex布局的 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="container"
flex布局示例
zyzhan
11-22 507
eg:1 <div class="container"> <div class="item"> </div> </div> .container{ width: 300px; height: 300px; background-color: skyblue; display: flex; justify-content: center; // 横向居中 align-items: center; // 垂直居中 } .item{
移动web开发实例flex布局案例源码
02-16
本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并掌握这一强大的CSS布局模式。 1. Flex布局基础： Flex布局允许开发者轻松地调整元素的大小和位置，以适应不同屏幕尺寸和设备...
使用flex布局轻松实现页面布局的示例代码
01-18
1、上中下布局： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document<...
【移动端网页布局】Flex 弹性布局案例 ③
03-06
本案例将深入探讨Flex布局的使用，通过实际的代码示例来阐述其核心概念和应用场景。 一、Flex布局基础 1. 容器（Container）：Flex布局中的容器是指设置了`display: flex`或`display: inline-flex`的元素，它是...
前端-flex布局案例
03-20
在前端开发中，Flex布局（Flexible Box Layout）是一种强大的盒模型布局方式，旨在提供更为灵活的版面控制，尤其在响应式设计中扮演着至关重要的角色。本案例将深入探讨Flex布局的核心概念、属性以及如何在实际项目...
携程网首页主要利用flex布局实现
05-02
本教程将深入探讨携程网首页如何利用Flex布局实现，以及Flex布局的基本概念和使用技巧。 Flex布局是CSS3中的一项新特性，旨在解决复杂的单行和多行布局问题，尤其是在不同屏幕尺寸和设备上保持良好的响应式表现。其...
flex布局实例篇
liudadacool的博客
06-13 526
flex布局实例篇
Flex布局：实例篇
06-04 1374
本文参考《阮一峰 Flex 布局 实例篇》 注：代码稍有改动，原文的宽度刚好够放三个点，有时候，第二个点并未居中，但看起来似乎是居中的，容易引起歧义. 本文 demo 源码 一、骰子布局 骰子的一面，最多可以放置9个点下面，就来看看Flex如何实现，从一个点到九个点的布局。 如果不加说明，demo 中的HTML一律如下 <div class="box"> <span ...
flex布局（使用场景）[微重点]案例
egg_er的博客
11-09 1608
flex布局 前面使用的流式布局，全程都在使用百分比，还需要不断地计算，稍有失误，就不太合适了。 今天我们用flex来布局，flex又称作弹性盒子，可以随意伸缩改变其大小，不影响布局。非常好用。那么他的使用场景有哪些呢？ 首先是在移动端开发中使用，因为pc端有些浏览器兼容性不太好，但是移动端是支持的，可以放心使用； 第一个场景就是制作搜索栏的时候，右边一个搜索，想让左边的搜索框自适应，这个时候用弹性盒子最合适不过了。先说一下布局思路，首先有一个父盒子包裹两个子盒子，给搜索按钮的大小可以写死，接下来就是设置搜
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

怒放de生命2010

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值