css3弹性盒子display：flex
先看上面的代码，解释一下意思，看你能认识多少（后面有注释）：
.container {
display: flex; //弹性布局
flex-direction: column; //容器内项目的排列方向 （column沿垂直主轴由上到下排列）
align-items: center; //项目在交叉轴上如何对齐 （center居中）
background-color: #b3d4db; //设置背景颜色
}
有点晕，因为我没给你说明一些专有名词：
1，什么是主轴，什么是交叉轴？
下面就给你解释一下上面的问题，咱们先看图：
1，水平主轴就是图中的（main axis）线标出的
2，垂直交叉轴就是（cross axis）线标出的
那其他的又是什么？
看下面的全部解释：
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
了解了以上基础之后，我们进一步了解一下Flex(弹性盒子)的六个属性，这几个属性主要就是在上面基础之上来设置容器不同的位置（下面有图文解释）;
以下6个属性设置在容器上：
- flex-direction 容器内项目的排列方向(默认横向排列)
- flex-wrap 容器内项目换行方式
- flex-flow 以上两个属性的简写方式
- justify-content 项目在主轴上的对齐方式
- align-items 项目在交叉轴上如何对齐
- align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
接下来一个一个解释（耐心看）：
（1）flex-direction：row；（默认情况）
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
注意：当x轴上排列时，子元素都是inline-block元素；当y轴上排列时，子元素都是block元素。
（2）是否换行：flex-wrap：nowrap；（默认所有子元素在一行排列）
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
如果可以换行，那么第一行有几个子元素？第二行有几个子元素？
<style>
.container{
display: flex; flex-wrap: wrap;
width: 400px;
height: 400px;
border: 1px solid black;
}
.item{
width: 98px;
height: 100px;
border: 1px solid black;
}
.item:nth-of-type(1){
flex-grow:;
}
.item:nth-of-type(2){
flex-grow:;
}
.item:nth-of-type(3){
flex-grow:;
}
.item:nth-of-type(4){
flex-grow:;
}
.item:nth-of-type(5){
flex-grow:;
}
</style>
<body>
<!-- 容器 -->
<div class="container">
<!-- 项目 -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
上述代码：每个子元素的盒子的宽度 98+2 = 100px，而“容器”的content去的宽度：400px，所以第一行可以放置4个子元素；让后将第五个子元素放置在第二行，同时注意高度
如果：子元素的盒子宽度：100px + 2px = 102px，那么第一行有三个子元素，第二行有两个子元素，同时注意高度
如果把子元素的高度设置为：150px，那么效果：
如果子元素一共有三行，那么效果：子元素的宽：196px，高100px
结论：（子元素x轴方向排列）设置换行属性后，子元素先在第一行排列，（子元素的盒模型宽=border+padding+content）与（“容器”的content宽度）能放下的就放在该行，不能放下的放在下一行。
两行时，将容器分为两个半区，每一行在自己的半区内居上（父级的align-items属性，默认是：flex-start）；同理：三行时，将容器分为三个半区，每一行也是在自己的半区内居上。
重点是：有几行，就将容器上下分为几个半区。（默认情况align-content：stretch）
（3）justify-content：默认值：flex-start；
项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)
flex-start：在主轴上由左或者上开始排列
flex-end：在主轴上由右或者下开始排列
center：在主轴上居中排列
space-between：在主轴上左右两端或者上下两端开始排列
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
<style>
.container{
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 400px;
height: 400px;
border: 1px solid black;
}
.item{
width: 100px;
height: 100px;
border: 1px solid black;
} </style>
<body>
<!-- 容器 -->
<div class="container">
<!-- 项目 -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
（4）在侧轴上如何对齐：align-items：stretch（默认值）
注意：stretch值在有height值时，height值决定高度
当子元素中无height值时，效果：
主要看下两个轴的时，效果：
因为有两行，第一行占容器的上半区，第二行占容器的下半区，每一行都在自己的半区居中。
（5）align-content：stretch（默认值）
注意：当只有一行flex项时，此属性不起作用。
该属性在多行下，设置每一行在容器的排列。
比如：align-content：flex-start
4. “项目”中的属性
注意：子级元素设置的宽是100px，但是盒模型的宽却是78px，要注意的是，width值的存在意义重大，尤其是计算布局时。
（1）order：number；该子级的先后顺序中排第几位
默认情况下，每一个子级按照标签的先后顺序在页面中布局，但是order可以改变子级在页面中的先后顺序。
<style>
.container{
display: flex;
width: 400px;
height: 400px;
border: 1px solid black;
}
.item{
width: 100px;
height: 100px;
border: 1px solid black;
}
.item:nth-of-type(1){
order: 5
}
.item:nth-of-type(2){
order: 4
}
.item:nth-of-type(3){
order: 3
}
.item:nth-of-type(4){
order: 2
}
.item:nth-of-type(5){
order: 1
}
</style>
<body>
<!-- 容器 -->
<div class="container">
<!-- 项目 -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
（2）flex-grow：number；子级在该行中所占的剩余空间比例。
剩余空间：就是子级的原始盒模型（设置的border+padding+content值）要是没有剩余空间，该值是无效的
比如：.item:nth-of-type(5){ flex-grow: 2; }
但是效果：因为没有剩余空间，所以flex-grow是无效的。同时，该例子中，
（3）flex-shrink：number；每一行中，子元素按原始盒模型排列后，超出“容器”的部分，按照比例大小进行收缩（砍掉），每个子元素中该值越大，被砍掉的越多，默认值为1
比如：上面图片效果中，5个子元素的flex-shrink都是默认值1，所以，都被等比例的砍掉了一部分
无意中，发现一个知识点：
如果子元素中，原始盒模型 > flex盒模型，内容是数字或者英语单词，且数字或英语单词过长，超过了flex盒模型的宽度，那么内容会撑开flex盒模型的宽度，直到原始盒模型的width值，内容如果继续增长，flex盒模型的宽度，不再增大，内容溢出。同时其他的子元素的flex盒模型重新计算布局。
如果子元素的原始盒模型 < flex盒模型，那么无上述效果。
（4）flex-basis：length | 0 | auto，（auto是默认值）
1）当值是：length长度的时候，它可以是长度（例如20％，5rem，10px等），flex-basis属性设置子元素的宽或高，当然width也是设置子元素的原始盒模型的宽，flex-basis值会替代width值
比如：第一个子元素设置：flex-basis：120px，那么第一个子元素的原始盒模型width = 120px，将剩余空间进行分配后，每个子元素的获得24.67的宽度。所以结果如下图：
<style>
.container{
display: flex;
width: 400px;
height: 400px;
border: 1px solid black;
}
.item{
width: 100px;
height: 100px;
border: 1px solid black;
}
.item:nth-of-type(1){
flex-grow:;
flex-basis: 120px;
}
.item:nth-of-type(2){
flex-grow:;
}
.item:nth-of-type(3){
flex-grow:;
}
</style>
<body>
<!-- 容器 -->
<div class="container">
<!-- 项目 -->
<div class="item">1 内容区：144.67*102</div>
<div class="item">2 内容区：124.67*102</div>
<div class="item">3 内容区：124.67*102</div>
</div>
</body>
2）那么当flex-basis：0时，相当于原始width的值是0；上述代码中的第一个子元素的flex-basis：0；结果：
因为第一个子元素的宽度是66.67，小于 原始盒模型的width值100px，所以当第一个子元素内容是数字或者单词的时候，若数字或单词的长度大于了flex盒模型的宽度，那么flex的盒模型的宽度会随着单词或数字的长度增大，直至原始盒模型的width100px。
3）flex-basis：auto；默认值。
（5） flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
这是速记flex-grow, flex-shrink和flex-basis组合。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认是0 1 auto
（6）align-self：允许子元素对容器的align-items属性进行覆盖设置
- .item {
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
- }
请注意float，clear、column、vertical-align等属性对弹性无效。
css3弹性盒子display：flex的更多相关文章
- CSS3弹性盒子（Flex Box）
CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...
- 【CSS3】 CSS3:弹性盒子（Flex Box）
Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- css3弹性盒子
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
- css3弹性盒子模型之box-flex
css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...
- css3弹性盒子 flex布局
CSS3 弹性盒 1.display:flex 说明: 设置为弹性盒(父元素添加) 2.flex-direction(主轴排列方式) 说明: 顺序指定了弹性子元素在父容器中的位置 row 默认在一行内 ...
- css3弹性盒子模型
当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...
- CSS3 弹性盒子
理解: CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 设置弹性盒子: 弹性盒子由弹性容器(Fl ...
随机推荐
- Django项目实战—分页
自定义分页 未封装版: 优点:直观 缺点:代码乱,不易维护,可拓展性差 data = [] for i in range(1, 302): tmp = {"id": i, &quo ...
- 《设计模式之美》 <02>评判代码质量好坏的维度
如何评价代码质量的高低? 实际上,咱们平时嘴中常说的“好”和“烂”,是对代码质量的一种描述.“好”笼统地表示代码质量高,“烂”笼统地表示代码质量低.对于代码质量的描述,除了“好”“烂”这样比较简单粗暴 ...
- Git---初入开源代码管理库的学习过程003
Git常用命令总结 上接<Git 初入开源代码管理库的学习过程>学了一周Git,基本有了个认识.每一位比我厉害的,都是大牛,网上找了几篇博客和教材(感谢你们),边学习边实践用了四天,写笔记 ...
- Matlab---绘图及其位置摆放
Matlab---绘图及其位置摆放 [@WP@20180509] 一.绘图函数 (1)绘制二维图形 (1.1) plot( ) 函数的应用格式. 1,plot(x). 当x 为一向量时,以x 元素的值 ...
- 2017 Chinese Multi-University Training, BeihangU Contest
2017 Chinese Multi-University Training, BeihangU Contest Add More Zero 思路:log10(2^m) = m*log10(2) 代码 ...
- Python3学习笔记37-LeetCode刷题
LeetCode中国官网一个用来刷编程题的网站,收录了很多面试题.感觉还是学习到很多.记录一下思路.代码还是要多敲. 建议编写完后直接在LeetCode上运行和提交.提交时会有不同的测试用例来测试代码 ...
- React 入门与实战-课时7 虚拟DOM的本质和目的
DOM树的概念: 一个网页呈现的过程: 1.浏览器请求服务器获取页面HTML代码 2.浏览器先在内存中,解析DOM结构,并在浏览器内存中,渲染出一颗DOM树: 3.浏览器把DOM树,呈现到页面上: R ...
- HDU - 5557 Matching Compressed String (自动机+倍增+表达式计算)
题意是给你一个自动机和一个字符串的括号表达式,问自动机能否接受这个字符串. 我一想,这不就是个模拟栈计算表达式+倍增么? 再一想,复杂度200*1000*10000*log(1e9),不对啊! 交上去 ...
- ao的mobile解决方案
http://aicdg.com/ue4-msaa-depth/ http://aicdg.com/vulkan-mass-shader-resolve/ ao两篇paper 分bake和realti ...
- 【SQL-历史执行语句查询】 查询对数据库执行了哪些SQL
Sql语句 QS.creation_time as '创建时间', ), (( THEN DATALENGTH(st.text) ) ) AS '查询语句' , ST.text as '执行文本', ...