一、弹性盒
弹性盒（flex），也叫伸缩盒，它是 CSS 中的一种布局手段，它主要用来代替浮动来完成页面的布局。flex 可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变。
- 弹性容器
- 要使用弹性盒，必须先将一个元素设置为弹性容器
- 我们可以通过 display 属性来设置弹性容器
display:flex;设置为块级弹性容器display:inline-flex;设置为行内的弹性容器
- 弹性元素
- 弹性容器的子元素使弹性元素（弹性项）
- 弹性元素可以同时是弹性容器
二、弹性容器的样式
- flex-direction：指定弹性容器中弹性元素的排列方式
- 可选值：
- row：默认值，弹性元素在容器中水平排列（自左向右）
- row-reverse：弹性元素在容器中反向水平排列（自右向左）
- column： 弹性元素在容器中纵向排列（自上向下）
- row-reverse：弹性元素在容器中反向纵向排列（自下向上）
- 可选值：
- flex-wrap：设置弹性元素是否在弹性容器中自动换行
- 可选值：
- nowrap：默认值，元素不会自动换行
- wrap；元素沿着辅轴方向自动换行
- wrap-reverse：元素沿着辅轴反方向换行
- 可选值：
- justify-content：如何分配主轴上的空白空间（主轴上的元素如何排列）
- 可选值：
- flex-start：元素沿着主轴起边排列
- flex-end：元素沿着主轴终边排列
- center：元素居中排列
- space-around：空白分布到元素两侧
- space-evenly：空白分布到元素单侧
- space-between：空白分布到元素中间
- 可选值：
- align-items：元素在辅轴上如何对齐，元素间的关系
- 可选值：
- stretch：默认值，将元素的长度设置为相同的值
- flex-start：元素不会拉伸，沿着辅轴起边对齐
- flex-end：沿着辅轴终边对齐
- center：居中对齐
- baseline：基线对齐
- 可选值：
- align-content：如何分配主轴上的空白空间（主轴上的元素如何排列）
- 可选值：
- flex-start：元素沿着主轴起边排列
- flex-end：元素沿着主轴终边排列
- center：元素居中排列
- space-around：空白分布到元素两侧
- space-evenly：空白分布到元素单侧
- space-between：空白分布到元素中间
- 可选值：
主轴：弹性元素的排列方向称为主轴；
侧轴：与主轴垂直方向的称为侧轴；
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
/*
flex-wrap：设置弹性元素是否在弹性容器中自动换行
- 可选值：
- nowrap：默认值，元素不会自动换行
- wrap；元素沿着辅轴方向自动换行
- wrap-reverse：元素沿着辅轴反方向换行
*/
flex-wrap: wrap;
/* flex-flow：wrap 和 direction 的简写属性 */
/*flex-flow:row wrap-reverse ;*/
}
ul li{
width: 200px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
ul li:first-child{
background-color: pink;
}
ul li:nth-child(2){
background-color: #bfa;
}
ul li:last-child{
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
/*
flex-wrap：设置弹性元素是否在弹性容器中自动换行
- 可选值：
- nowrap：默认值，元素不会自动换行
- wrap；元素沿着辅轴方向自动换行
- wrap-reverse：元素沿着辅轴反方向换行
*/
flex-wrap: wrap;
/* flex-flow：wrap 和 direction 的简写属性 */
/*flex-flow:row wrap-reverse ;*/
}
ul li{
width: 200px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
ul li:first-child{
background-color: pink;
}
ul li:nth-child(2){
background-color: #bfa;
}
ul li:last-child{
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
/*
justify-content：如何分配主轴上的空白空间（主轴上的元素如何排列）
- 可选值：
- flex-start：元素沿着主轴起边排列
- flex-end：元素沿着主轴终边排列
- center：元素居中排列
- space-around：空白分布到元素两侧
- space-evenly：空白分布到元素单侧
- space-between：空白分布到元素中间
*/
justify-content: space-between;
}
ul li{
width: 100px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
ul li:first-child{
background-color: pink;
}
ul li:nth-child(2){
background-color: #bfa;
}
ul li:last-child{
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 300px;
height: 600px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
flex-flow: row wrap;
/*
align-items：元素在辅轴上如何对齐，元素间的关系
- 可选值：
- stretch：默认值，将元素的长度设置为相同的值
- flex-start：元素不会拉伸，沿着辅轴起边对齐
- flex-end：沿着辅轴终边对齐
- center：居中对齐
- baseline：基线对齐
*/
align-items: center;
}
ul li div{
width: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
ul li:first-child{
background-color: pink;
}
ul li:nth-child(2){
background-color: #bfa;
}
ul li:nth-child(3){
background-color: gold;
}
ul li:nth-child(4){
background-color: darkorange;
}
ul li:last-child{
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>
<div>1</div>
</li>
<li>
<div>2</div>
<div>2</div>
</li>
<li>
<div>3</div>
<div>3</div>
<div>3</div>
</li>
<li>
<div>4</div>
</li>
<li>
<div>5</div>
<div>5</div>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 300px;
height: 600px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
flex-flow: row wrap;
/*
align-content：如何分配主轴上的空白空间（主轴上的元素如何排列）
- 可选值：
- flex-start：元素沿着主轴起边排列
- flex-end：元素沿着主轴终边排列
- center：元素居中排列
- space-around：空白分布到元素两侧
- space-evenly：空白分布到元素单侧
- space-between：空白分布到元素中间
*/
align-content: space-between;
}
ul li div{
width: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
flex-shrink: 0;
}
ul li:first-child{
background-color: pink;
}
ul li:nth-child(2){
background-color: #bfa;
}
ul li:nth-child(3){
background-color: gold;
}
ul li:nth-child(4){
background-color: darkorange;
}
ul li:last-child{
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>
<div>1</div>
</li>
<li>
<div>2</div>
<div>2</div>
</li>
<li>
<div>3</div>
<div>3</div>
<div>3</div>
</li>
<li>
<div>4</div>
</li>
<li>
<div>5</div>
<div>5</div>
</li>
</ul>
</body>
</html>
三、弹性元素的样式
- flex-grow：指定弹性元素的伸展的系数
- 当父元素有多余空间的时候，子元素如何伸展，默认为 1
- 父元素的剩余空间，会按照比例进行分配
- flex-shrink：指定弹性元素的收缩系数
- 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩，默认为 1
- 缩减多少是根据 缩减系数 和 元素大小 来计算的
- flex-basis：指定的是元素在主轴上的基础长度
- 如果主轴是 横向的 则该值指定的就是元素的 宽度
- 如果主轴是 纵向的 则 该值指定的就是元素的 高度
- 默认值是 auto，表示参考元素自身的高度或宽度
- 如果传递了一个具体的数值，则以该数值为准
- flex：可以设置弹性元素的所有的三个样式
- 格式：flex 增长 缩减 基础;
- 默认值：initial 相当于 flex: 0 1 auto;
- auto 相当于 flex: 1 1 auto;
- none 相当于 flex: 0 0 auto；即弹性元素没有弹性
- order：决定弹性元素的排列顺序
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
}
ul li{
width: 100px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
}
ul li:first-child{
background-color: pink;
/*
flex-grow：指定弹性元素的伸展的系数
- 当父元素有多余空间的时候，子元素如何伸展
- 父元素的剩余空间，会按照比例进行分配
*/
flex-grow: 1;
}
ul li:nth-child(2){
background-color: #bfa;
flex-grow: 2;
}
ul li:last-child{
background-color: plum;
flex-grow: 3;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
}
ul li{
width: 300px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
}
ul li:first-child{
background-color: pink;
/*
flex-shrink：指定弹性元素的收缩系数
- 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
- 缩减多少是根据 缩减系数 和 元素大小 来计算的
*/
flex-shrink: 1;
}
ul li:nth-child(2){
background-color: #bfa;
flex-shrink: 2;
}
ul li:last-child{
background-color: plum;
flex-shrink: 3;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
}
ul li{
width: 300px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
flex-basis：指定的是元素在主轴上的基础长度
- 如果主轴是 横向的 则 该值指定的就是元素的宽度
- 如果主轴是 纵向的 则 该值指定的就是元素的高度
- 默认值是 auto，表示参考元素自身的高度或宽度
- 如果传递了一个具体的数值，则以该数值为准
*/
flex-basis: 100px;
}
ul li:first-child{
background-color: pink;
}
ul li:nth-child(2){
background-color: #bfa;
}
ul li:last-child{
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
}
ul li{
width: 300px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
flex：可以设置弹性元素的所有的三个样式
- 格式：flex 增长 缩减 基础;
- 默认值：initial 相当于 flex: 0 1 auto;
- auto 相当于 flex: 1 1 auto;
- none 相当于 flex: 0 0 auto；即弹性元素没有弹性
*/
flex: initial;
}
ul li:first-child{
background-color: pink;
}
ul li:nth-child(2){
background-color: #bfa;
}
ul li:last-child{
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>弹性盒</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
}
ul li{
width: 300px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
}
ul li:first-child{
background-color: pink;
/* order：决定弹性元素的排列顺序 */
order: 3;
}
ul li:nth-child(2){
background-color: #bfa;
order: 2;
}
ul li:last-child{
background-color: plum;
order: 1;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>