CSS3弹性盒模型 display:box
刚开始做网页时就有一个困惑，为什么display:block只能垂直排列，如果要水平排列就要使用float:left等方式。这种方法最难受的当然是当子元素的数量改变时，需要去修改子元素的宽度使重新适应。bootstrap为了兼容性在实现栅格布局时，就不得不生成大量如下代码：
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
好在有less，使代码量大减，比如：
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
而CSS3给出了直接的解决方案，就是display: box。当然这个CSS3属性如大多数没得到浏览器的直接支持，需要在box前面加上浏览器的前缀。
给出最初的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
background: black;
}
article {
display: -webkit-box;
height: 100%;
}
article div {
}
article div:nth-child(1) {
background: red;
}
article div:nth-child(2) {
background: green;
}
article div:nth-child(3) {
background: blue;
}
</style>
</head>
<body>
<article>
<div>123</div>
<div>abc</div>
<div>tarol</div>
</article>
</body>
</html>
打开chrome，得到的效果如图：
首先比较与传统display:block的不同：
- 子元素按照水平排列
- 子元素的宽度没填充
- 子元素的高度填充了
好像就是由display:block的垂直排列转换到了display:box的水平排列。但display:box的功能更加强大，上面三个行为都是可以单独控制的。
- 由box-orient控制，默认inline-axis(===horizontal)，可设置为block-axis(===vertical)
article {
display: -webkit-box;
height: 100%;
/* 注意这里加前缀的使property，前面是value*/
-webkit-box-orient: vertical;
}效果图：
- 由box-flex控制，这个作用于子元素，让子元素具备‘弹性’，具备‘弹性’的子元素可以伸缩到充满父元素
比如我们把第一个子元素的‘弹性’设置为1article div:nth-child(1) {
background: red;
-webkit-box-flex: 1;
}效果图：
把所有子元素的‘弹性’设置为1，由于大家的弹性一样，所以宽度一样article div {
-webkit-box-flex: 1;
}效果图：
把第一个子元素的‘弹性’设置为2，其他的维持1不变，由于第一个子元素的‘弹性’是其他子元素的两倍，所以占位也是其他子元素的两倍。就是把老爸的财产分成4份，老大独占2份，老二和老三各得1份。article div:nth-child(1) {
background: red;
-webkit-box-flex: 2;
}效果图：
乍看一下是对的，但凡事就怕认真fanjian二字。打开F12，看了下width，老二和老三一个是344px，另一个是359px。（老二：就因为我叫老二么）。
原因出在哪里？出在元素的innerHTML，一个是abc三个字符，一个是tarol五个字符。就像一个弹簧，弹性是一样的，但一个比另一个多两节，拉伸的长度能一样么？处理方式是将所有赋予box-flex属性的子元素全部加上：width:0article div {
-webkit-box-flex: 1;
width: 0;
}现在对比下，发现是一样的了，或者有1px的差别（老爸：咱一个钢镚就别剁成两瓣了）
- 由box-align控制，默认是stretch，即填充。可选值是start/end/center/baseline。
先把之前的flex全部取消掉，然后将可选值赋给父元素，效果图分别如下
start/baseline:
end:
center:
总结一下，当box-orient为horizontal时，box-align定义子元素的垂直位置，当box-orient为vertical时，box-align定义子元素的水平位置 - 说到box-align，就不得不说box-pack，它的作用和box-align是相辅相成的。取值范围也相似：start(default)/end/center/justify。
将box-align设置为start，对box-pack分别取值，得到的效果如下：
end:
center:
justify:
同样总结下，当box-orient为horizontal时，box-pack定义子元素的水平位置，当box-orient为vertical时，box-pack定义子元素的垂直位置。从表现来看，box-pack更接近text-align的意义，而box-align更接近vertical-align。 - box-direction，显示子元素的顺序，类似css中的direction，可选值normal(default)/reserve
删除其他的css property，回归到原始状态，给父元素添加box-direction: reserve，效果图如下：
- box-ordinal-group，box-direction可以逆向显示，box-ordinal-group则可以定义显示的具体次序，作用于子元素。
article > div:nth-child(1) {
background: red;
-webkit-box-ordinal-group: 2;
}
article > div:nth-child(2) {
background: green;
-webkit-box-ordinal-group: 3;
}
article > div:nth-child(3) {
background: blue;
-webkit-box-ordinal-group: 1;
}效果图：
同时设置box-direction，则同样进行逆向显示
box-flex-group，作用于子元素，为子元素设定‘弹性’功能的分组。默认为1，也就是都在第一组。
为第一个元素的box-flex-group赋值为2article > div {
-webkit-box-flex: 1;
width: 0;
}
article > div:nth-child(1) {
background: red;
-webkit-box-flex-group: 2;
}
article > div:nth-child(2) {
background: green;
}
article > div:nth-child(3) {
background: blue;
}效果让人震惊，老大不见了：
因为对box-flex-group的定义是这样的，父元素先分配给组序号大的子元素需要的空间，然后剩余空间全部交给组序号小的子元素去‘弹’。
就是说，老爸的财产老大要多少给多少，剩下的其他人去分，那老大要多少？他说了：我什么都不要（width:0），所以没有了。（老大：我没说啊）
修改下第一个子元素的widtharticle > div:nth-child(1) {
background: red;
-webkit-box-flex-group:;
width: 200px;
}效果如下：
老大又说了：妈蛋有这种好事，那我全要！article > div:nth-child(1) {
background: red;
-webkit-box-flex-group:;
width: 100%;
}然后：
然后他就被揍了。
每次写完一篇，总有一种好像漏写了什么的感觉。年过完了，也一个多月没更新了，这篇作为开始吧。
CSS3弹性盒模型 display:box的更多相关文章
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- CSS3弹性盒模型flex box快速入门 2016.03.16
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- CSS3盒模型display:box;box-flex:3;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- css3基础教程：CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
随机推荐
- AT NEW 和 AT END OF 的用法
第一条记录:col1='1000',col2='AAA1',col3=1 第二条记录:col1='1000',col2='AAA2',col3=2 第三条记录:col1='2000',col2='AA ...
- React Native 系列(六) -- PropTypes
前言 本系列是基于React Native版本号0.44.3写的.在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现 ...
- linux下添加定时任务
linux下定时任务文件在/etc/crontab 直接vim /etc/crontab 打开就行 在crontab文件中如何输入需要执行的命令和时间.该文件中每行都包括六个域,其中前五个域是指定命令 ...
- semantic UI first web
官方文档:https://semantic-ui.com/introduction/getting-started.html semantic UI: SemanticUI是一款语义化设计的前端开源 ...
- 【FAQ系列】：DB服务器产生大量物理读问题优化思路
一 [现象] 1.7点到9点IO监控指标util特别高,如下: 2 .查看读写情况:读产生很高的物理IO,如下 [分析]:对比其他服务器,buffer pool都是80G,正常情况下热点数据都是从bu ...
- pwnable.kr memcpy之write up
// compiled with : gcc -o memcpy memcpy.c -m32 -lm #include <stdio.h> #include <string.h> ...
- HDU 3682 To Be an Dream Architect：查重【三维坐标系中点在实数上的映射】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3682 题意: 有一个n*n*n的立方体,左下角坐标为(1,1,1),接下来进行m次操作. 每个操作形如 ...
- Linux学习(1)-常用快捷键、文件管理和查询
有话要说 为什么要用Linux?要用Linux的原因太多,想说说不完啊. 如果你说用Linux只是为了装逼,那证明你真的还很菜.不排除有装逼了因素,那也只占非常少的比例,可以忽略不计. 我们反问一下, ...
- 你不可不看的Android开发命名规范
标识符命名法最要有四种: Camel(骆驼)命名法:除首单词外,其余所有单词的第一个字母大写,如:fooBar; Pascal命名法:所有单词的第一个字母大写,如:FooBar: 下划线命名法:单词与 ...
- 大端(Big Endian)与小端(Little Endian)
1. 你从哪里来?端模式(Endian)的这个词出自Jonathan Swift书写的<格列佛游记>.这本书根据将鸡蛋敲开的方法不同将所有的人分为两类,从圆头开始将鸡蛋敲开的人被归为Big ...