弹性容器上的样式02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性容器上的样式02</title>
<!-- <link rel="stylesheet" href="../chujicss/css/12.01.07.02.css"> -->
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 600px;
height: 800px;
border: 10px red solid;
/* 设置ul为弹性容器 */
display: flex;
/* flex-direction: row;默认值时自左向右排列 */
/* flex-wrap:
设置元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap:元素沿着辅轴方向自动换行
wrap-reverse：元素沿着辅轴反方向自动换行
*/
flex-wrap: wrap;
/* flex-wrap: wrap; */
/* flex-flow: wrap 和 direction 的简写属性; */
/* flex-flow: wrap row; */
/*
justify-content
-如何分配主轴上的空白空间（主轴上的元素如何排列）
-可选值：
flex-start 元素沿着主轴 起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素间
space-evenly 空白 分布到元素的单侧
*/
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: space-around ; */
/* justify-content: space-between; */
/* justify-content: space-evenly; */
/*
align-items:
-元素在辅轴上如何对齐
-元素间的关系
-可选值：
stretch 默认值 将元素的长度设置为相同的值（行与行之间的高度）
例：第一行中 1 2 3 的高度是一样的
第二行中 4 5 的高度是一样的
flex-start 元素不会拉伸，沿着 辅轴起边对齐
flex-end 沿着辅轴终边对齐
center 居中对齐
baseline 基线对齐
*/
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center ; */
/* align-items: baseline; */
/* 要想设置一个元素水平居中对齐，就这样设置
justify-content:center;
align-items:center;
*/
/* align-content :辅轴空白空间的分布*/
/* align-content: center; */
}
li {
width: 200px;
line-height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
flex-shrink: 0;
}
li:nth-child(1) {
/* align-self :用来覆盖当前弹性元素的align-items*/
align-self: center;
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3) {
background-color: orange;
}
li:nth-child(4) {
background-color: yellowgreen;
}
li:nth-child(5) {
background-color: orchid;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>4</li>
<li>
5
<div>5</div>
</li>
</ul>
</body>
</html>
运行结果为：