<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.a{
width: 800px;
border: 10px red solid;
/* 设置ul为弹性容器 */
display: flex;
}
.a li{
width: 200px;
height: 100px;
background-color: #bbffcc;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
flex-grow: 弹性增长系数
--可以认为这是决定弹簧 拉伸 时的长度
*/
/* flex-grow: 1; */
/*
lex-shrink: 缩减系数
-缩减系数的计算方式比较复杂
-缩减的多少根据 缩减系数 和 元素大小计算
-可以认为这是决定弹簧 压缩 时的长度
*/
/* flex-shrink: 1; */
/*
flex-basis 元素的基础长度
-指定的时元素在主轴上的基础长度
如果主轴是横向的,这该值指定的就是元素的宽度
如果主轴是横向的,这该值指定的就是元素的宽度
默认值是 auto ,表示参考元素自身的高度或宽度
-可以认为这是决定弹簧 静止 时的长度
*/
/* flex-basis: 100px; */
/* flex: 可以设置弹性元素的所有的三个样式
顺序:增长、缩减、基础长度
可选值:
initial 相当于 flex:0 1 auto (默认值)
auto 相当于 flex:1 1 auto
none 相当于 flex:0 0 auto
*/
flex:1 1 auto;
/* 上面相当于flex-grow: 1; flex-shrink: 1; flex-basis:auto;*/
/* order 指定元素的排列顺序 */
}
.a li:nth-child(1){
order: 3;
}
.a li:nth-child(2){
background-color: pink;
order: 2;
}
.a li:nth-child(3){
background-color: orange;
order: 1;
}
</style>
</head>
<body>
<ul class="a">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
31.4弹性元素的样式——H5C3
最新推荐文章于 2023-07-11 16:29:11 发布