Flex实现栅格布局

最新推荐文章于 2024-08-16 14:53:15 发布
最新推荐文章于 2024-08-16 14:53:15 发布
阅读量6.6k 收藏 5
点赞数 2
分类专栏： # 微信小程序 文章标签： html flex css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45525272/article/details/112217123
版权

文章目录

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

在这里插入图片描述
如果不清除浮动就会带来一系列影响，需要在父盒子里加上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"
最低0.47元/天 解锁文章
呆萌宝儿姐
关注
专栏目录
通过flex实现栅格系统
wujingj的博客
08-21 2459
效果图    &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt; &lt;titl
flex实现响应式栅格布局（样式）
石开的博客
08-11 707
结果展示： 实现思路： · 媒体查询 来实现适配不同尺寸屏幕 · flex 来实现多行多列 代码如下： .father { display: flex; flex-wrap: wrap; width: 70%; margin: auto; background-color: blueviolet; } @media screen
Flex弹性盒子布局和Grid网格布局详解
最新发布
qq_41765777的博客
08-16 1124
Flex布局（Flexible Box Layout，也称为弹性盒布局）是CSS3中的一种布局模式，旨在让容器能够自动调整其子元素的大小、顺序和对齐方式，以更好地适应不同设备和屏幕尺寸。它的核心理念是“弹性”，即容器中的元素可以根据可用空间进行伸缩。
鸿蒙开发Flex、栅格布局详解
Androiddddd的博客
01-15 2431
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。
css自学框架之栅格化12格布局、flex布局下两端对齐，不满左对齐
zhaoyang314的博客
07-02 1266
CSS 弹性布局，flex布局最后一行左对齐；flex布局下两端对齐，不满左对齐。
flex栅格
gfh
10-04 834
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scal
如何实现flex栅格布局及合并单元格
小柠檬爱编程
05-12 1464
注意事项 三格展示,注意border,会有重合2像素问题,需单独设置 最后一行特色服务需要合并单元格 <div class="row-wrap"> <div class="col-4" data-language="price.Paypal">PayPal商家和个人收款账号配置</div> <div class="col-4" data-language="price.Abandonded">弃单提醒—提高转化率</div&gt.
简单实现栅格布局的两种方式
09-25
本文将详细介绍两种简单实现栅格布局的方法：使用float和使用display：flex。 首先，我们来了解使用float属性来实现栅格布局。float属性在CSS中可以用来控制元素的浮动，它可以使元素脱离正常的文档流，并向左或向...
HTML使用栅格布局实现六种筛子样式的代码详解
01-19
先上效果图下面附上代码 <!DOCTYPE html> <html> <head>... display: flex; margin-top: 20px; } .small { width: 10px; height: 10px; background: pur
栅格布局和flex布局
10-08
栅格布局和flex布局都是用于页面布局的CSS技术，但它们有一些不同之处。 栅格布局是基于网格系统的布局方法。它将页面划分为多个列和行，可以在这些列和行中进行元素的定位和调整。栅格布局非常适合构建响应式网站...
flex grid布局
m0_61894608的博客
08-01 1144
file grid
css flex 网格布局_基础6：新的Flex网格
culi4814的博客
08-15 792
css flex 网格布局Last month I wrote posts covering what’s new in Foundation 6 as well a deep dive into Foundation’s new menu component. 上个月，我写了一些帖子，内容涵盖了Foundation 6 的新功能以及对Foundation新菜单组件的深入了解。 Arguabl...
flex的布局和网格布局grid布局
liulang68的博客
08-26 750
这样就给我们平均分成了3等份 不管是块级元素还是行内元素都可以指定flex布局。在flex眼中众生是平等的。
基于flex的网格布局
weixin_30625691的博客
06-24 135
Bootstrap网格系统的强大，已经能满足大部分前端开发的需求。但没有很好的解决固定宽度、宽度百分比和高度对齐的问题。 Flex(IE10+)可以很好的解决BootStrap的问题： CSS部分： .row { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box;...
flexbox布局_借助Flexbox轻松响应网格布局
cungui5726的博客
08-21 187
flexbox布局To celebrate the season 4 debut of HBO's Game of Thrones, and to help out my 1st year students with their fairly complex designs, I decided that today’s tutorial would be a grid layout. 为了庆祝...
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
Luo3255069063的博客
03-12 2726
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
了解flex布局和grid布局
qq_41367352的博客
07-11 1134
Flexible Box 模型，通常被称为 flexbox（弹性布局），是一种一维的布局模型。//块级元素//行内元素flex布局支持6个容器属性：属性网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。//块级元素//行内元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

呆萌宝儿姐

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

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

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

打赏作者

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

抵扣说明：

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

余额充值