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

目录

清除浮动

作用于行内元素

flex-basis宽度

案例一：

案例二：

案例三：

flex-grow设置权重

案例一：

案例二：

 简写flex-grow:1 0 auto;

---

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