目录:
1. 基本布局
2. 弹性元素的属性:flex-grow
3. 弹性元素的属性:flex-shrink
4. 弹性元素的属性:flex-basis
5. flex 统一设置这3个属性(常用)
6. order
一、基本布局
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 800px;
border:10px red solid;
/* 当设置了ul为弹性盒子,li就自动是弹性元素 */
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
二、弹性元素的属性:flex-grow
- flex-grow:1 表示所有元素平均分配剩下的空白,比如空白300,那么每个
方框就在弹长100。
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 弹性元素的增长系数 */
flex-grow: 1;
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
-
- 如果每一个都设置了增长系数,假设剩余空白是300, 现在总共系数分配比例:1 + 2 + 3 = 6,300 / 6 = 50, 对应的每个方框,弹长:1* 50 = 50, 2 * 50 = 100, 3 * 50 = 150
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 弹性元素的增长系数 */
flex-grow: 1;
}
li:nth-child(2){
background-color: pink;
/*增长系数是按照比例去分配的, */
flex-grow: 2;
}
li:nth-child(3){
background-color: orange;
flex-grow: 3;
}
三、弹性元素的属性:flex-shrink
- flex-shrink:弹性元素的缩减系数,默认1
测试:把父类ul 的width设置小点,会发现里面的元素,会自动缩减,以适应父类边框变小的情况。
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 400px;
border:10px red solid;
/* 当设置了ul为弹性盒子,li就自动是弹性元素 */
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 弹性元素的增长系数*/
flex-grow: 1;
/* 弹性元素的缩减系数
- 缩减系数的计算方式比较复杂
- 缩减多少是根据 缩减系数和 元素大小 来计算。 基本理论是元素越大,缩减的越多
*/
flex-shrink: 1;
}
li:nth-child(2){
background-color: pink;
flex-grow: 2;
}
li:nth-child(3){
background-color: orange;
flex-grow: 3;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
四、弹性元素的属性:flex-basis
flex-basis 指定的是元素在主轴上的基本长度
如果主轴 - 横向 - 则该值指定的就是元素的宽度 - 原来设置li的width无效
如果主轴 - 纵向 - 则该值指定的就是元素的高度- 原来设置li的height无效
- 默认值是auto,表示参考元素自身的高度或宽度
- 如果传递了一个具体的数值,则以该值为准
- flex-basis: 设置弹性元素的基础长度。一旦这里设定了100px, li里面设定的width:200px,就失效了。
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 800px;
border:10px red solid;
/* 当设置了ul为弹性盒子,li就自动是弹性元素 */
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 弹性元素的增长系数*/
/* flex-grow: 1; */
flex-shrink: 1;
/* 弹性元素基础长度:flex-basis ,一旦这里设定了100, li里面 设定的width:200px,就失效了。
所有的li,都固定成100px
*/
flex-basis: 100px;
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
总的可以理解为:flex-basis: 100px; 表示设置了这个弹框的宽度是100, 然后这个弹簧能弹多长,由flex-grow来确定,越大越长。这个弹框能够缩多短,由flex-shrink来决定。 所以这3个属性,就是弹簧的3种状态
五、flex 统一设置这3个属性(常用)
- 通常我们在运用这几个属性的时候,不会一个个这样单独设置,而是直接一起写.
- 假设我们想要的效果是:flex-grow:增长系数1, flex-shrink:缩减系数1, flex-basis:基础值 auto
- flex 可以设置弹性元素所有的3个样式
flex 增长 缩减 基础
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 800px;
border:10px red solid;
/* 当设置了ul为弹性盒子,li就自动是弹性元素 */
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 通常这样用:
flex 可以设置弹性元素所有的3个样式
flex 增长 缩减 基础
*/
flex: 1 1 auto;
}
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
- flex 除了可以自己设置值,还有几个固定的可选值
-
initial "flex:0 1 auto" auto "flex: 1 1 auto" none "flex:0 0 auto" 设置这个,表示弹性元素没有弹性了
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
flex 可以设置弹性元素所有的3个样式
flex 增长 缩减 基础
initial "flex:0 1 auto"
auto "flex: 1 1 auto"
none "flex:0 0 auto" 设置这个,表示弹性元素没有弹性了
*/
flex: initial;
}
六、order文章来源:https://www.toymoban.com/news/detail-575416.html
- 控制元素的排列顺序
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
flex: initial;
}
li:nth-child(1){
/* order 决定弹性元素的排列顺序 */
order:3;
}
li:nth-child(2){
background-color: pink;
order:2;
}
li:nth-child(3){
background-color: orange;
order:1;
}
注意:flex 对IE 8,9可能支持不是很好,移动端随意使用。 浮动和flex优先推荐flex
文章来源地址https://www.toymoban.com/news/detail-575416.html
到了这里,关于十五、flex弹性元素的样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!