目录
[简写flex-grow:1 0 auto;](#简写flex-grow:1 0 auto;)
目录
[简写flex-grow:1 0 auto;](#简写flex-grow:1 0 auto;)
flex作为一维布局,行和列的使用，忽略的小角色，大作用。
清除浮动
父元素display:flex; 子元素的float:left;无效。
html
<div class="wrap">
<div class="item">首页0</div>
<div class="item">
<span>内容很长</span>
<span>helloWorld</span>
</div>
<div class="item">首页2</div>
</div>
css
.wrap {
width:562px;
background-color: #999;
display: flex;
}
.item{
float: left;
background-color:aquamarine;
color:blueviolet;
border: 1px solid #999;
margin: 20px;
}
作用于行内元素
第二个item下面有两个行内元素span,在父元素item中更改期布局。
.item:nth-child(2){
display: inline-flex;
flex-direction: column;
text-align:center;
}
css
.wrap {
width:562px;
background-color: #999;
display: flex;
}
.item{
float: left;
background-color:aquamarine;
color:blueviolet;
border: 1px solid #999;
margin: 20px;
}
.item:nth-child(2){
display: inline-flex;
flex-direction: column;
}
flex-basis宽度
在使用flex布局之中，flex-basis不是auto的情况下，等同于width；
flex-grow的值用来定义每个子元素的比例权重值。
案例一：
flex-basis和width同时存在的话，flex-basis有number值，优先级高于width
html
<div class="wrap">
<div class="item flex1">flex1 text Hello world</div>
<div class="item flex2">flex2 text Hello world</div>
<div class="item flex3">flex3 text Hello world</div>
<div class="item flex4">flex4 text Hello world</div>
<div class="item flex5">flex5 text Hello world</div>
<div class="item flex6">flex6 text Hello world</div>
</div>
css
<style>
.wrap {
width:100%;
height: 200px;
display: flex;
}
.item {
flex-basis: 100px;
// 这时的width的值无效，flex-basis优先级高于width的值
width: 10;
border: 1px solid #999;
background-color:aqua;
font-size: 16px;
font-family: bold;
}
</style>
案例二：
flex-basis值为auto时，大小跟随width的值
css
.item {
flex-basis: auto;
// 这时flex-basis的值为auto,值跟随width的值
width:80px;
border: 1px solid #999;
background-color:aqua;
font-size: 16px;
font-family: bold;
}
案例三：
内容有空格不会换行展示，flex-basis配合white-space:nowrap;使用。
flex-basis:0;
white-space:nowrap;
css
.item {
flex-basis: 0;
white-space: nowrap;
width: 90px;
border: 1px solid #999;
background-color:aqua;
font-size: 16px;
font-family: bold;
}- 默认是auto,跟随内容的大小来适应，如果这时设置了width，则等于width的值；
- 不为auto，例如'100px',这时的width值无效，在使用flex布局情况下，flex-basis优先级高于width;
- 为0时，子元素的宽度跟随width的值;如果内容有空格，会换行展示；
- flex-basis:0;white-space:nowrap; 宽度跟随width的值，内容如果有空格，使用white-space:nowrap; 不会换行；
flex-grow设置权重
1：剩余空间：父元素的总宽度减去子元素宽度之和
2：权重比例值：所有子元素flex-grow之和 > 1 ? 1 : 所有子元素flex-grow之和
3：可以分配的剩余空间 = 剩余空间*权重比例值
4：可以分配的剩余空间 * 单个子元素权重之和/所有子元素权重之和
案例一：
在父元素宽度没有撑满的情况下，使用flex-grow比重属性，用来占满父元素多余的空间。
css
.item {
flex-basis: 14%;
flex-grow:0.2;
width:10px;
border: 1px solid #999;
background-color:aqua;
font-size: 16px;
font-family: bold;
}
.flex2 {
flex-grow: 3;
background-color:blue;
}
案例二：
之前写布局的时候，经常使用的布局方式如下，然后在子元素设置width:100%;
html
.wrap {
width:562px;
background-color: #999;
display: flex;
justify-content: space-around;
}
.item{
width:100%;
text-align:center;
background-color:aquamarine;
color:blueviolet;
border: 1px solid #999;
}
子元素使用flex-grow:1；flex-grow:1;也可以达到同样的效果
css
.wrap {
width:562px;
background-color: #999;
display: flex;
}
.item{
flex-grow:1;
text-align:center;
background-color:aquamarine;
color:blueviolet;
border: 1px solid #999;
}
简写flex-grow:1 0 auto;
flex-grow:1;
flex-shrink: 0;
flex-basis: auto;
css
.wrap {
width:562px;
background-color: #999;
display: flex;
}
.item{
flex: 1 0 auto;
text-align:center;
background-color:aquamarine;
color:blueviolet;
border: 1px solid #999;
}order的使用
指定单个项目更改其在视觉顺序上面的显示位置。
你可能有一个设计，也许是显示新闻的卡片。新闻项的标题是突出显示的关键内容，并且如果用户在标题之间使用键盘制表符按键（tab）以查找要阅读的内容，则可能是用户可能会跳转到的元素。该卡还带有日期；我们要创建的最终设计就是这样。 ---MDN
html
<div class="wrapper">
<div class="card">
<h3>News item title</h3>
<div class="date">1 Nov 2017</div>
<p>This is the content of my news item. Very newsworthy.</p>
</div>
<div class="card">
<h3>Another title</h3>
<div class="date">6 Nov 2017</div>
<p>This is the content of my news item. Very newsworthy.</p>
</div>
</div>
css
.wrapper {
display: flex;
}
.card {
border: 1px solid #eee;
background-color:#409EFF;
display: flex;
flex-direction: column;
color:#303133;
}
.date{
order: -1;
text-align: right;
}