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. ssh key生成

    Mac电脑用终端生成SSH key 访问自己的Github 字数684 阅读427 评论4 喜欢15 前言:最近有不少刚刚使用github管理代码的开发者或者新手码农在网上 问我如何关联自己的gith ...

  2. Xcode 运行程序，左侧memory 不显示内存

    运行程序后,xcode 不显示当前使用的内存情况,问题是打开了僵尸--enable zoombie Objects,关闭即可 打开 product--->SCheme-->EditSChe ...

  3. Flyout中ComboBox失效

    参见这篇文章:https://blogs.msdn.microsoft.com/wsdevsol/2016/09/14/combobox-from-an-appbarbutton-loses-mous ...

  4. 架构师养成记--15.Disruptor并发框架

    一.概述 disruptor对于处理并发任务很擅长,曾有人测过,一个线程里1s内可以处理六百万个订单,性能相当感人. 这个框架的结构大概是:数据生产端 --> 缓存 --> 消费端 缓存中 ...

  5. 【从html到算法框架】科技白学习计划书

    一.学习计划 根据对Web知识层次的梳理,我觉得可以把它分别以技术和思想两个维度进行分类.从技术维度上讲,Web知识有内容.结构.样式.操作(静态的修改与动态的修改(动态,例如使用定时器)).交互(与 ...

  6. 【原创】自己动手写工具----XSmartNote [Beta 3.0]

    一.前面的话 在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...

  7. css随笔1

    1.简单清除浏览器样式 *{        padding: 0px;        margin: 0px;    } 2.得到屏幕范围的div html,body{        width: 1 ...

  8. 【转】sublime配置默认浏览器+多浏览器快捷键

    配置在Chrome,Firefox中打开 安装 SideBarEnhancements 然后通过ctrl + k, ctrl + b打开侧边栏,在侧边栏的文件中右击,找到 open width -&g ...

  9. noip2012 开车旅行

    此题100分的解法就是先预处理出每个点的下一个点之后倍增就好了.其实并没有太大难度. pbihao用双向链表写过了此题.在本地上我treap狂操他,but在rqnoj上,我依靠反复提交才A掉此题(最后 ...

  10. java中HashMap重要性质和优化总结

    原文: http://www.cnblogs.com/junyuhuang/p/4519257.html