web前端 之 flex布局-----（ flex布局的好处）

最新推荐文章于 2023-10-09 14:59:59 发布
最新推荐文章于 2023-10-09 14:59:59 发布
阅读量1.1w 收藏 12
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CS13477062349/article/details/79269732
版权

例如：我们在写 经典的 筛子布局

  如果用传统的position 浮动来写：如第一个筛子：

<div class="div1">
   <p></p>
</div>
样式就写得很麻烦，又由于每个筛子中的点的距离不一样，每个筛子 都有不同的 left top定位，每个筛子 都得写样式，所以这里就有了flex布局 

.div1{
    width:100px;
    height:100px;
    border:1px solid red;
    position:relative;
}
.div1 p{
    width:15px;
    height:15px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    left:50%;
    top:50%;
}
flex布局，只有四个概念：父容器 子容器 主轴 交叉轴，如下图是用了flex布局后的css代码，最主要原因是，不用每个筛子都设置自己的样式，可以看到，后面的几个筛子 我用了前面几个筛子的样式（当然 前面的几个筛子，样式 都可以套用）
<style>
    *{
        padding:0;
        margin:0;
    }
    body{
        display:flex;
        justify-content: space-around;

    }
    [class*='div']{
        display: flex;
        width:100px;
        height:100px;
        border-radius:4px;
        border:1px solid red;
        padding:5px;
    }
    [class*='div'] p{
        width:15px;
        height:15px;
        border-radius: 50%;
        margin:2px;
        background-color: black;
    }
    .div1{
        justify-content: center;
        align-items: center;

    }
    .div2{
        align-items: center;
        justify-content: space-around;
        flex-direction:column;

    }
    .div3{
        justify-content: space-around;
        align-items: center;

    }
    .div3 p:nth-child(1){
        align-self: flex-start;
    }
    .div3 p:nth-child(3){
        align-self: flex-end;
    }
    .div4{
        justify-content: space-around;
        flex-direction: column;
        align-items: center;

    }
    .div4 div{
        display: flex;
        justify-content:space-around;
        width:100%;
    }
    .div4 div p{
        align-self: center;
    }
    .div5{
        justify-content: space-around;
        flex-direction:column;
        align-items: center;
    }
    .div5 div{
        display:flex;
        justify-content: space-around;
        width:100%;
        align-items: center;

    }
    .div5 div p{
        align-self: center;
    }

    .div6{
        justify-content: space-around;
        flex-direction:column;
        align-items: center;
    }
    .div6 div{
        display:flex;
        justify-content: space-around;
        width:100%;
        align-items: center;

    }
    .div6 div p{
        align-self: center;
    }
    .div8{
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .div8 div{
        display:flex;
        justify-content: space-between;
        width:100%;
    }
    .div8 div p{
        align-self: center;
    }

</style>
<body>
<!--筛子布局-->
<div class="div1">
    <p></p>
</div>
<div class="div2">
    <p></p>
    <p></p>

</div>
<div class="div3">
    <p></p>
    <p></p>
    <p></p>
</div>
<div class="div4">
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>

</div>
<div class="div5">
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</div>
<div class="div6">
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</div>
<div class="div6">
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>
<div class="div8">
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>

关于flex 布局，网上写的很详细，就只有几个知识点，看一遍应该就会了，运用一次就可以得心应手了

有头发的光头强
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flex布局：打造灵动、响应式网页设计的利器
JINGWHALE
06-11 906
Flex布局，又称弹性盒布局，是现代CSS布局体系中的璀璨明珠。它以革命性的理念革新了传统的网页布局方式，为设计师和开发者提供了前所未有的灵活性与便捷性。本篇内容精讲将引领您全方位领略Flex布局的魅力，深入剖析其工作原理与核心属性，助您在实践中轻松驾驭复杂、响应式的网页设计。
前端学习--用flex布局来写--携程首页
05-11
在前端开发领域，布局设计是至关重要的，而Flex布局（Flexible Box Layout）是现代Web页面布局的主流方式之一。本文将深入探讨如何使用Flex布局来重构携程首页，并结合HTML和CSS进行实现，不涉及JavaScript部分。 ...
CSS常用布局二（flex布局）
BreenCL的博客
07-20 3461
flex布局 前言：flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置“display:flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效； 1.基本概念 使用了flex布局的元素，称为flex容器（flex container），简称为”容器“。它所有的子元素自动生成容器成员，
flex布局看这一篇就够了
qq_46048008的博客
08-20 2万+
“弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化声明定义容器里面包含着项目元素，使用或声明为弹性容器。
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 12万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
Flex布局全面介绍
qq_59305028的博客
07-17 8136
Flex基本介绍
flex布局
YMYYZ的博客
01-31 8711
flex布局的详细解读
Web-前端教程05 Flex 布局大法.zip
05-24
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是现代Web开发中的一个核心...在Web-前端教程05 Flex 布局大法.mp4中，你将深入学习到Flex布局的原理、使用方法及实践技巧，为构建现代响应式网站打下坚实基础。
Web-前端html+css从入门到精通 184. flex弹性布局（1-7）.mp4.zip.zip
05-23
Flex布局，也称为 Flexible Box 或 Flexbox，是一种用于定义容器内子元素排列、对齐和分配空间的CSS布局模式。它在2009年由W3C提出，并在后续版本中逐渐成熟，现在已经成为现代Web开发的标准布局方式。Flexbox特别...
Go-flex-是flexboxCSS布局算法的Go实现
08-14
这个项目是为了解决前端开发中的布局问题，特别是针对现代Web应用的复杂和动态内容排列需求。Go-Flex提供了对CSS Flexible Box Layout（flexbox）模型的实现，允许开发者在后端以Go语言进行灵活的布局设计。 ### Go...
Web-前端html+css从入门到精通 170. 布局扩展之等高布局.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础。本课程“Web-前端html+css从入门到精通 170. 布局扩展之等高布局”着重讲解了一个重要的设计技巧——如何实现等高布局。等高布局是指在网页的不同区域，无论内容多少，...
web前端开发常用布局demo
09-20
本内容主要包含常用的web开发中所需要用到的布局方式，可以作为参考引用到自己的项目开发中。
flex弹性布局（详解）
wshwsh_的博客
08-09 1万+
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
flex布局详解
程序员小明1024
12-20 6008
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
视口-百分比布局和Flex布局
m0_62181310的博客
04-24 1004
通过此篇了解移动端与PC端屏幕和网页布局的差异，能够使用Flex布局模型布局移动端网页 目录 一、视口 二、百分比布局 三、FLex布局 1.主轴对齐方式 - justify-content 2.侧轴对齐方式 -align-items 3.弹性伸缩比 一、视口 使用meta标签设置视口宽度，制作适配不同设备宽度的网页 。 viewport：视口 width=device-width：视口宽度 = 设备宽度 initial-scale=1.0：缩放1倍（不缩.
前端：Flex布局
qq_64131064的博客
08-01 488
​Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。、
web大前端布局
GoldenPigGirl的博客
10-21 790
web大前端布局 想必新手学习代码首先都要接触到前端而在前端里面布局也是一件非常重要之一下面我们先来了解一下布局吧 常用的布局 常用的布局一般分为一下几大类： 文档布局（text）： 文档流本质是 nomal flow （普通流、常规流） 元素在文档中的特点 块级元素，和内联元素。 块级元素：是自带有这行效果，在文档中独占一行的效果，块状元素会自上而下的排列且在默认宽度是父元素的100%而高度默...
前端页面布局之【Flex布局】详解
最新发布
商务合作/软件定制/学习交流
10-09 857
前端页面布局之【Flex布局】详解
Web开发常用布局方式总结
青春木鱼的博客
11-08 6039
无论是前端还是客户端开发都离不开页面的展示，而页面是由布局和各种组件构成的。布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。研究布局的目的是让我们的页面尽可能的还原UI设计给我们的设计图，适配各种尺寸的屏幕，使其在各种尺寸屏幕上能很好地显示出我们的视图。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值