文档章节

浅谈display:flex

法斗斗
 法斗斗
发布于 2017/07/24 16:55
字数 341
阅读 6
收藏 0

浅谈display:flex

display:flex 意思是弹性布局

 

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

一、页面行排列布局

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

可以用浮动的布局方式

html部分

css部分

这种布局有两个缺点

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

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

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

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

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

1:2分时

同样分为3份时

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

 

 二、div上下左右居中

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

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

html部分

css部分 

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

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

本文转载自:

法斗斗
粉丝 22
博文 368
码字总数 17774
作品 0
杨浦
程序员
私信 提问
CSS3 Flex布局(伸缩布局盒模型)学习

https://www.cnblogs.com/sxz2008/p/6635196.html 实例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。 CSS3引入...

壹峰
2018/08/08
0
0
CSS3.0盒模型display: box;详解

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到f...

黯灭
2013/12/09
0
0
Flex弹性布局在移动设备上的应用

本文内容为整理摘录。 引文 首先,我们有表格布局。当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局。 然后是现在大多数人都在使用的浮动布局。我们可以...

yinyongcom666
2013/08/07
0
4
关于FlexBox中flex与inline-flex的区别?

设置盒子的display:flex;flex-direction:row;justify-content:flex-start | flex-end | center(任意一个属性);就能实现子项的水平排列。 那设置display:inline-flex;也能实现同样的效果。 ...

liulee
2016/10/26
2.4K
0
使用 Flex 布局与其他普通布局的简单对比

最近使用 flex 布局来做各种居中真的带来了不少方便,现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。 一、左右 1:1 布局 布局: 利用 float 属性 在使用 flex 之前,实...

Gwokhov
2018/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
16
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
10
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
14
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
16
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部