目录结构
.
├── basic.css
├── index.html
└── style.css
basic.css
body {
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
padding: 10px;
}
.item {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
background: aquamarine;
color: red;
padding: 30px;
display: block;
text-align: center;
}
.item span {
font-size: 50px;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flex box</title>
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item item-1"><span>1</span></div>
<div class="item item-2"><span>2</span></div>
<div class="item item-3"><span>3</span></div>
<div class="item item-4"><span>4</span></div>
<div class="item item-5"><span>5</span></div>
</div>
</body>
</html>
style.css
.container {
display: flex;
/* 1. 弹性-流 */
/* flex-flow: row wrap; */
/* 2. 排版-内容（主轴）*/
/* justify-content: space-around; */
/* 3. 对齐-项目（交叉轴）*/
/* height: 300px;
align-items: flex-start; */
/* 4. 对齐-多行项目 （交叉轴） */
/* height: 300px;
flex-wrap: wrap;
align-content: space-between; */
}
/* 1. 项目排序 order默认值为0，
order值越大，排得越后，反之。 */
/* .item-1 {
order: 1;
}
.item-5 {
order: -1;
} */
/* 2. 项目自己对齐 */
/* .item-1 {
align-self: flex-end;
}
.item-2 {
align-self: center;
}
.item-3 {
align-self: stretch;
}
.item-4 {
align-self: center;
}
.item-5 {
align-self: flex-end;
} */
/* 3. flex 弹性
可扩大 可缩小 默认值 */
/* .item-1 {
flex: 0 0 500px;
} */
/* 3-1. 项目扩大 */
/* .item-1 {
flex-grow: 1;
}
*/
/* 3-2. 项目缩小 */
/* item-3 {
flex-shrink: 0;
} */
/* 3-3. 项目默认值 */
/* .item {
flex-basis: 300px;
} */
备注：取消注释，逐一尝试即可
网友评论