换行
效果
<!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;
}
ul {
width: 800px;
height: 100px;
border: 10px red solid;
display: flex;
/* 指定容器中弹性元素的排列方式
可选值:
row默认值: 弹性元素水平水平排列(左向右)
ro
*/
flex-direction: row;;
/**
设置弹性元素是否在自动换行
可选:
nowwarp 默认 不换行
wrap: 元素沿辅轴自动换行
*/
flex-wrap: wrap;
/* flex-flow: row wrap; */
/* 主轴的空白空间 */
/* flex-start 元素沿着主轴起边排列 */
/* justify-content: flex-end; */
/* justify-content: flex-start; */
/* 居中排列 */
/* justify-content: center; */
/* 空白分布元素两侧 */
/* justify-content: space-around; */
/* 空白分布单侧 */
/* justify-content: space-evenly; */
/* 分布到元素中间 */
justify-content: space-between;
}
li {
width: 200px;
height: 100px;
background-color: #bda;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 收缩比例0 */
flex-shrink: 0;
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
aa
</body>
</html>