探讨弹性布局Flexible Box
早之前有所了解，现在有时间整理一下，跟大家分享学习。
虽然Flex布局09年就被W3C所提出，但是目前浏览器支持上还不是很好，网上找的一张图片，仅供参考：
我们先从简单讲起。如果仅仅只想实现一个栅格布局，没必要引入一个复杂的框架（如bootstrap），短短几行代码也能实现该功能。
例子：有个父div，三个子div，宽度比是1:2:1，以下代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
box-sizing: border-box;
}
body {
padding: 20px;
}
.flex{
display:flex;
}
.flex div{
text-align: center;
}
.one{
background: blue;
flex:1;
}
.two{
flex:2;
background: yellow;
}
</style>
</head>
<body>
<div class="flex">
<div class="one">one</div>
<div class="two">two</div>
<div class="one">one</div>
</div>
</body>
</html>
显示如下：
解读：把父div设置为display:flex;后，它的所有子元素自动成为容器成员。同时，所有的子元素的float、clear、vertical-align都会失效。子元素有个属性flew，其实接受的是3个值，分别是flex-grow，flex-shrink，flex-basis，后两个属性选填（这里用不上便不填，后面再做介绍），flex-grow：定义当前子元素的比例。
Q：如果我想要列与列之间有等距间隔怎么办？
A：你可以添加 margin 到列上。你也可以添加 padding 到列上。当然父div有个宽度补齐（justification）的属性也可以实现。
代码稍作修改：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
box-sizing: border-box;
}
body {
padding: 20px;
}
.flex{
display:flex;
justify-content: space-between;
}
.flex div{
text-align: center;
}
.one{
background: blue;
width: 23%;
}
.two{
background: yellow;
width:48%;
}
</style>
</head>
<body>
<div class="flex">
<div class="one">one</div>
<div class="two">two</div>
<div class="one">one</div>
</div>
</body>
</html>
显示如下：
解读：稍作介绍下justify-content属性。它定义子元素在主轴上的对齐方式，一共有5个值：
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，子元素之间的间隔都相等
space-around：每个子元素两侧的间隔都相等，所以就会形成子元素与子元素之间的间隔是子元素与两端之间的间隔的2倍
以上是一些简单的用法，下面想详细的记录下flex的其他用法，跟大家分享，不对之处请多多指出。
—————————————————————————————————分割线—————————————————————————————————————
将一个容器（为避免混淆，暂称父元素）设置display为flex后，父元素便拥有以下属性：
1、flex-direction：决定子元素的排列方向。
row： 默认值，水平方向排列，起点在左边。
row-reverse：水平方向排列，起点在右边。
column：垂直方向，起点在上沿。
column-reverse：垂直方向，起点在下沿。
2、flex-wrap：定义一行排不下时如何换行。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
3、flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4、justify-content：前面已经介绍，忘记了请往前看。
5、align-items：还记得flex-direction吗，这个属性类似于定义子元素在垂直方向上面的对齐方式。
先来段代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.flex{
display:flex;
width:200px;
height:200px;
background: #ccc;
margin:50px auto;
}
.flex div{
text-align: center;
}
.one{
background: blue;
flex:1;
}
.two{
background: yellow;
flex:2;
}
</style>
</head>
<body>
<div class="flex">
<div class="one"><p></p>one1</div>
<div class="two">two</div>
<div class="one">one2</div>
</div>
</body>
</html>
（此时子元素并没设置高度以及父元素没有设置align-items当然是按照默认值显示）
1）stretch（默认值）：如果子元素未设置高度或设为auto，将占满整个容器的高度。
修改css
.flex{
display:flex;
width:200px;
height:200px;
background: #ccc;
margin:50px auto;
align-items:flex-start;
}
.one{
background: blue;
flex:;
height: 50px;
}
.two{
background: yellow;
flex:;
height: 100px;
}
2）flex-start：上沿对齐。
3）flex-end：下沿对齐。
4）center：居中对齐。
5）baseline: 子元素的第一行文字的基线对齐。
子元素有以下属性：
1、order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.one{
background: blue;
flex:;
order:;
}
.two{
background: yellow;
flex:;
}
2、flex-grow：定义当前子元素的比例，比如上面one比例是1，two比例是2。
3、flex-shrink：可选属性。属性定义了子元素的缩小比例，默认为1，即如果空间不足，该子元素将缩小。如果所有子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个子元素的flex-shrink属性为0，其他子元素都为1，则空间不足时，属性为0的不缩小，负值对该属性无效。
4、flex-basis：可选属性。定义分配空间前，该子元素的宽度。默认值auto，可设置固定值（如100px），设置后该子元素将占据固定空间。
.flex{
display:flex;
width:200px;
height:200px;
background: #ccc;
margin:50px auto;
}
.one{
background: blue;
flex-basis:80px;
}
.two{
background: yellow;
flex:;
}
5、简写的flex属性。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6、align-self：align-self属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.flex{
display:flex;
width:200px;
height:200px;
background: #ccc;
margin:50px auto;
align-items:center;
}
.one{
background: blue;
flex:1;
height: 50px;
}
.two{
background: yellow;
flex:2;
height: 100px;
align-self:flex-end;
}
.flex div{
text-align: center;
}
</style>
</head>
<body>
<div class="flex">
<div class="one">one1</div>
<div class="two">two</div>
<div class="one">one2</div>
</div>
</body>
</html>
———————————————————————————————分割线——————————————————————————————————
学以致用，我们来用Flex布局实现圣杯布局
要实现的效果：上中下三块，其中中间一块为左中右，左右等宽，中间占其余宽度。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
padding:0;
margin:0;
}
html,body{
width: 100%;
height: 100%;
}
.main{
width:100%;
height:100%;
display: flex;
flex-direction: column;
}
.header,.footer{
flex: 1;
background: yellow;
}
.middle{
flex: 5;
display:flex;
}
.center{
flex: 1;
background: #ccc;
}
.left,.right{
background:green;
flex: 0 0 100px;
}
.left{
order: -1;
}
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<div class="middle">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
分享完毕，欢迎转载，请注明出处！
参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
探讨弹性布局Flexible Box的更多相关文章
- 弹性布局 Flexible Box
页面中任何一个元素都可以指定为 弹性布局(Flex) 属性:display 取值: 1.flex 将块级元素变为弹性布局容器 2.inline-flex 将行内元素变为弹性布局容器 兼容性 ...
- CSS：CSS弹性盒子布局 Flexible Box
一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...
- 简单探讨弹性布局flex
css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- css3 弹性布局和多列布局
弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性. 定义一个弹性盒子 在父盒子上定义display属性: #box{ display ...
- 第10章 布局样式相关-伸缩布局（Flexible Box）
伸缩布局(一) CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或 ...
- CSS3 Flex Box 弹性盒子、弹性布局
目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...
- CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
- CSS3伸缩盒Flexible Box
这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...
随机推荐
- 【openstack N版】——云主机调整大小\冷迁移
一.先决条件 云主机冷迁移,即:将一台云主机从一个计算节点上,迁移到另外一个计算节点上.因为环境原因,所以我们需要准备两个计算节点. 1.1准备环境 在控制节点上,安装一个计算节点 #在控制节点安装n ...
- 一个想法照进现实-《IT连》创业项目：万事开头难
前言: 之前是一个想法,现在已经进入创业阶段,所以这个系列的标题,改了. 众筹的事在今天也停止了. 7-9号会在深圳龙岗布吉参加一个风投对接的活动,今晚(6号)会出发. 因为:在深圳会呆几天,而且这个 ...
- ERP顾问工作中应该注意哪些工作是不该做的
1.不要轻易对客户说“不“ 当客户提出一个问题顾问要判断一下,是否属于顾问实施的问题,如果属于顾问实施范畴,而自己又不清楚,这时应把问题纪录下来,和客户解释清楚,回去请教资深顾问给与回答,如果该问题不 ...
- 通讯录--(iOS9独有的方法)
导入库文件 #import <ContactsUI/ContactsUI.h> #pragma mark iOS9 新出的点击通讯录的获取信息的办法 #pragma mark - 先弹 ...
- 如果服务器不能把编码格式改成UTF8怎么办？（20161113）
//数组内容的编码格式:utf8 /* 如果服务器不能把编码格式改成UTF8 则在方法里的执行sql语句之前输入下面三段代码就可以使得返回的数组的编码格式为UTF8 $conn->query(' ...
- 使用mysql_Front链接mysql，出现警告access denied for user ''@'localhost'
刚刚安装好的mysql5.7,想来使用工具方便一下,却一直有报这个错误: 最后找出原因:我给root用户设置的密码神不知鬼不觉的消失了,无奈, 解决办法一: cmd->mysql -h loca ...
- paoding-rose 了解
paoding-rose 是人人开源的基于 spring 开发的 javaEE 框架.wiki 地址: https://code.google.com/archive/p/paoding-rose/ ...
- WebSocket数据包协议详解
其实我一直想不明白HTML5包装个应用层办议作为Socket通过基础目的是为了什么,其实直接支持Socket tcp相对来说更加简单灵活.既然标准已经制定而浏览器也支持那对于我们开发者来说只能用的分. ...
- Spring——scope详解（转载）
摘自<spring 解密> scope用来声明IOC容器中的对象应该处的限定场景或者说该对象的存活空间,即在IOC容器在 对象进入相应的scope之前,生成并装配这些对象,在该对象不再处于 ...
- NoSQL注入的分析和缓解
本文要点介绍: 1.了解针对NoSQL的新的安全漏洞 2.五类NoSQL攻击手段,比如重言式.联合查询.JavaScript 注入.背负式查询(Piggybacked queries),以及跨域违规 ...