弹性布局-flex
浅谈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布局时用到的两个比较常见又好用的例子
原文地址:http://www.cnblogs.com/manman04/p/5704660.html
弹性布局-flex的更多相关文章
- 弹性布局flex
前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对 ...
- 前端入门5-CSS弹性布局flex
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- 移动端弹性布局--flex
目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...
- 弹性布局Flex的基本语法
一.Flex的简介 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.用六个字概括弹性布局就是简单.方便.快速. flex( fle ...
- 弹性布局--flex方向
flex方向 flex方向由flex-direction特性决定,用于定义弹性布局模式.flex-direction共有4种模式:从左向右.从右向左.从上往下.从下往上. 主轴 主轴的起点与终点定义了 ...
- 微信小程序页面布局之弹性布局-Flex介绍
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...
- 简单探讨弹性布局flex
css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...
- 弹性布局flex 介绍
摘自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模 ...
- Flutter布局----弹性布局 (Flex)
弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...
随机推荐
- 代码片段---S3C2440按键中断驱动程序的设计
用到的知识: 中断 等待队列 睡眠 select poll misc http://pan.baidu.com/s/1bneSG5h
- Working with MTD Devices
转:http://www.linuxforu.com/2012/01/working-with-mtd-devices/ Working with MTD Devices By Mohan Lal J ...
- 小白日记44:kali渗透测试之Web渗透-SqlMap自动注入(二)-sqlmap参数详解REQUEST
Sqlmap自动注入(二) Request ################################################### #inurl:.php?id= 1. 数据段:--d ...
- C#操作串口总结
Technorati 标签: C#,SerialPort,ReadTo,ReadTimeout 最近几天一直在调一个要长时间连续不断的操作串口,并且是多线程运行,不允许中断的服务.后来服 ...
- 【原创】利用C++ RAII技术自动回收堆内存
[说明]这篇文章本来发布在我个人网站的博客上,但由于:1,打算以cnblogs为家了:2. 关于智能指针部分需要修订,所有将修订版发在这里,作为第一篇文章. 常遇到的动态内存回收问题 在C++的编程过 ...
- GSS6 4487. Can you answer these queries VI splay
GSS6 Can you answer these queries VI 给出一个数列,有以下四种操作: I x y: 在位置x插入y.D x : 删除位置x上的元素.R x y: 把位置x用y取替 ...
- sql时间格式
取值后格式化 {:d}小型:如2005 {:D}大型:如2005年5月6日 {:f}完整型 当前时间获取 DateTime.Now.ToShortDateString 取值中格式化 SQL Serve ...
- 日历控件table布局
作为初学者,一开始就接触div+css ,所以说实话,我并不怎么喜欢table布局,一般逃避. 先上这次的效果图: 看到这个图,第一次用table布局没实现,原因是给tr加下边框失效.当时没找到原因, ...
- 无需操作系统和虚拟机,直接运行Python代码
Josh Triplett以一个“笑点”开始了他在PyCon 2015上的演讲:移植Python使其无需操作系统运行:他和他的英特尔同事让解释器能够在GRUB引导程序.BIOS或EFI系统上运行.连演 ...
- Java之阶乘数的计算
说起“阶乘数”,我们应该都不会感到陌生.当老师布置了这样的作业,我们大多数人是一贯用笔算,还有的同学会用计算机去计算.数学是讲究原理和方法的,我们知其然,也要知其所以然.下面我们就用编程来计算阶乘数. ...