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布局时用到的两个比较常见又好用的例子

浅谈display:flex的更多相关文章

  1. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  2. flex布局浅谈

    flex布局浅谈和实例 阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉 ...

  3. CSS属性中的display属性浅谈；

    首先我们要知道什么是块级元素和行内元素有什么区别: 承接上篇文章:(浅谈HTML和body标签) 块级元素:浏览器解析为独占一行的元素(例如:div.table.ul等.),浏览器会在该元素的前后显示 ...

  4. flex布局浅谈和实例

    阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉牙,但是有用啊). ** ...

  5. 浅谈新的布局方式-flex

    引言: 网页布局在flex出来之前,是由盒模型为底子,float,position,table,百分比来进行布局的,重绘的比较多,影响性能,复杂又不好维护.flex布局,可以简便.完整.响应式地实现各 ...

  6. CSS——display:flex

    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 设为Flex布局以后,子元素的float.clear和vertical-align属性 ...

  7. 【css】浅谈BFC

    定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...

  8. BFC 浅谈

    写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...

  9. 浅谈Hybrid技术的设计与实现第二弹

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...

随机推荐

  1. [bigdata] 使用Redis队列来实现与机器无关的Job提交与执行 （python实现）

    用例场景: 定时从远程多台机器上下载文件存入HDFS中.一开始采用shell 一对一的方式实现,但对于由于网络或者其他原因造成下载失败的任务无法进行重试,且如果某台agent机器down机,将导致它对 ...

  2. Oracle 的字符集与乱码

    字符集问题一直叫人头疼,究其原因还是不能完全明白其运作原理. 在整个运行环节中,字符集在3个环节中发挥作用: 1.软件在操作系统上运作时的对用户的显示,此时采用操作系统定义的字符集进行显示.我们在系统 ...

  3. linux显示中文

    设置centos显示中文   怎么设置Linux系统中文语言,这是很多小伙伴在开始使用Linux的时候,都会遇到一个问题,就是终端输入命令回显的时候中文显示乱码.出现这个情况一般是由于没有安装中文语言 ...

  4. Java 创建文件夹和文件，字符串写入文件，读取文件

    两个函数如下: TextToFile(..)函数:将字符串写入给定文本文件: createDir(..)函数:创建一个文件夹,有判别是否存在的功能. public void TextToFile(fi ...

  5. JavaScript的Dom操作

    两个练习: 1.两个表单里面的数据相互移动: <style type="text/css"> select { width: 100px; position: rela ...

  6. 数字与字母混合生成流水号规则--ASP实现

    最近遇到一个比较奇葩的事情,自己所负责的一个系统出现一个流水号用完的问题:正常情况下,流水号用完应该增加多位来解决这个问题.鉴于各种因素,最后决定:位数不变,增加字母进去,当数字用完后,会出现字母,而 ...

  7. JavaScript 中 Number()、parseInt()、parseFloat()的区别

    Number(): 概述:Number 对象由 Number() 构造器创建,是经过封装的能让你处理数字值的对象.在非构造器上下文中 (如:没有 new 操作符),Number 能被用来执行类型转换. ...

  8. 年月日与time的相互转换

    年月日的转换 // 这里就是把时间格式化成你要的 SimpleDateFormat sdf = new SimpleDateFormat("yyyy");//将时间转换为年 Sim ...

  9. ACM交流赛感悟

    A题很水,字符串匹配,提交好几次都没通过,后来老何提醒后,发现题意理解错了,改过来之后,还是没过----------------在敲代码之前,一定要三个人统一一下思路,思路一样的话,开敲: F题是简单 ...

  10. json-c与树

    json是一种轻量级的数据交换格式,因为其灵巧使得其在应用层开发以及接口层开发使用的十分广泛,最常用的莫过于协议交流使用json数据,比xml轻巧,又比二进制数据有规则.无论是各大公司的开放平台或者是 ...