<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.ul1 {
width: 1000px;
border: 5px solid red;
margin: 0 auto;
margin-top: 200px;
/* 弹性容器 */
display: flex;
}
/* 弹性增长系数 */
/* flex-grow: 1; */
/* 弹性元素的缩减系数 */
/* flex-shrink: 1; */
/* flex-basis指的是元素在主轴上的基础长度
如果主轴是 横向的 则 该值指定的就是元素的宽度
如果主轴是 纵向的 则 该值指定的就是元素的高度
默认值是 auto 表示
如果传递了一个具体的数值，则以该值为准
*/
.box1 {
width: 200px;
height: 200px;
background-color: aquamarine;
/* flex-grow: 1; */
order: 2;
/*
元素基础长度
flex-basis指定的是元素在主轴上的基础长度
如果主轴是 横向的 则 该值指定的就是元素的宽度
如果主轴是 纵向的 则 该值指定的就是元素的高度
*/
/* flex-basis: auto; */
/*
flex可以设置弹性元素所有的三个样式
flex 增长 缩减 基础
initial "flex:0 1 auto".
auto "flex: 1 1 auto;"
none "flex:0 0 auto " 弹性元素没有弹性
*/
/* flex-grow: none; */
}
.box2 {
width: 200px;
height: 200px;
background-color: darksalmon;
/* flex-grow: 1; */
/* 设置元素在父元素里的排列顺序 */
order: 3;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
/* flex-grow: 1; */
order: 1;
}
</style>
<body>
<ul class="ul1">
<li class="box1">
<h1>一</h1>
</li>
<li class="box2">
<h1>二</h1>
</li>
<li class="box3">
<h1>三</h1>
</li>
</ul>
</body>
</html>弹性增长系数
flex-grow: 2;
在父元素中占有的比例
flex-basis: 400px;
设置元素的基础长度
