flex布局容易忽略的角色作用

目录

清除浮动

作用于行内元素

flex-basis宽度

案例一：

案例二：

案例三：

flex-grow设置权重

案例一：

案例二：

[简写flex-grow:1 0 auto;](#简写flex-grow:1 0 auto;)

目录

清除浮动

作用于行内元素

flex-basis宽度

案例一：

案例二：

案例三：

flex-grow设置权重

案例一：

案例二：

[简写flex-grow:1 0 auto;](#简写flex-grow:1 0 auto;)

order的使用

---

flex作为一维布局,行和列的使用，忽略的小角色，大作用。

清除浮动

父元素display:flex; 子元素的float:left;无效。

 <div class="wrap">
    <div class="item">首页0</div>
    <div class="item">
      <span>内容很长</span>
      <span>helloWorld</span>
    </div>
    <div class="item">首页2</div>
  </div>

.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;

}

.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

<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>

<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的值

.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;

.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比重属性，用来占满父元素多余的空间。

.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%;

.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;也可以达到同样的效果

.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;

.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

<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>

.wrapper {
  display: flex;
  
}
.card {
  border: 1px solid #eee;
  background-color:#409EFF;
  display: flex;
  flex-direction: column;
  color:#303133;
}
.date{
  order: -1;
  text-align: right;
  }