浅谈display:flex

╰半夏微凉° 2022-06-18 04:36 196阅读 0赞

display:flex 意思是弹性布局

883655-20160725182133872-841606683.png

首先flex的出现是为了解决哪些问题呢？

一、页面行排列布局

883655-20160725184244841-1329788559.png

像此图左右两个div一排显示

可以用浮动的布局方式

html部分

883655-20160725184441372-1709444300.png

css部分

883655-20160725184506200-154520210.png

这种布局有两个缺点

1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

用display:flex布局，可以解决这两个缺点

刚吃的html部分不变，css部分

883655-20160725185254606-1133246575.png

父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同

883655-20160725185603216-426739172.png

1:2分时

883655-20160725185624997-594518144.png

同样分为3份时

883655-20160725185908013-711696442.png

883655-20160725185951934-843104943.png

flex是所占的比例，这样的布局就方便很多。

二、div上下左右居中

我之前写过div上下左右居中的几种方法

其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex

883655-20160725191213419-1845535147.png

html部分

883655-20160725191240075-929458564.png

css部分

883655-20160725191259903-325213478.png

在未知div宽高时，用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子

发表评论

表情：
评论列表 （有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

    相关 浅谈java

    java与c语言 java是一门面向对象编程的强类型语言，一切东西都要抽象为对象，具有封装、继承、多态三个特性。这门语言常用于开发网站，与c语言不同，c语言是面向

    短命女短命女/ 0 赞/ 393 阅读

    相关 ETL 浅谈

    ETL是将业务系统的数据经过抽取、清洗转换之后加载到数据仓库的过程，目的是将企业中的分散、零乱、标准不统一的数据整合到一起，为企业的决策提供分析依据。 ETL是BI项目重要的一

    电玩女神电玩女神/ 0 赞/ 357 阅读

    相关 NoSQL浅谈

    如今我们需要处理的数据越来越多，必须以商用的服务器集群来构建大型的硬件平台。NoSQL就应运而生了。它主张使用无模式的数据，可以运行在集群中。 NoSQL优点 1.

    叁歲伎倆叁歲伎倆/ 0 赞/ 334 阅读

    相关 浅谈QOS

    一QOS概述 (一)QOS的作用：解决特定数据的延迟、抖动、丢包问题。 (二)QOS的两种体系：    1、集成服务：给某种特殊需保证的数据划出特定的带宽。其

    向右看齐向右看齐/ 0 赞/ 540 阅读

    相关 浅谈HTTP

    HTTP协议 http是网络上传输HTML的协议，用于浏览器和服务器之间的一种通信工具。 （google浏览器提供了一套web应用调试工具，适合web开发。ctrl+s

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 393 阅读

    相关 Fiddler浅谈

    最近同事推荐了一个工具-Fiddler,感觉很好用,我也推荐下. 首先了解下Fiddler,网上是这样介绍的,它是一个http协议调试代理工具,能够记录并检查所有你的电脑和互

    小鱼儿小鱼儿/ 0 赞/ 297 阅读

    相关 RPC 浅谈

    RPC——Remote Procedure Call Protocol，这是广义上的解释，远程过程调用。但是，我接下俩要说的是应用层面的，而不是所谓协议层面的。 上一篇文章讲

    ╰半橙微兮°╰半橙微兮°/ 0 赞/ 355 阅读

    相关 浅谈GC

    什么是GC? ØGC: Generational garbage collection垃圾回收，是.net中对内存管理的一种功能； Ø垃圾回收器跟踪并回收托管内存中分配的对

    傷城~傷城~/ 0 赞/ 385 阅读