<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局</title>
<style>
.box1{
width: 1000px;
height: 800px;
border: 1px solid black;
margin: 50px auto;
/* 属性要写在父盒子上 */
display: flex;
/* 是否换行 （会不会为了弹性布局挤压自己的子盒子）
默认值：nowrap 不换行
wrap 换行
wrap-reverse：改变朝向（自下而上）
*/
flex-wrap: wrap;
/* 子盒子水平方向排列方式
center：居中
space-between: 两端对齐，中间自适应
space-around：两端对齐，中间自适应。两端留空，值为中间空的一半
space-evenly：均匀分布
*/
/* justify-content: space-evenly; */
/* flex-direction 子盒子排列方向
默认 row ： 横向排列
column ：纵向排列
row-reverse： 横向从右往左
column-reverse：纵向由下往上
*/
/* flex-direction: column-reverse; */
/* align-items 子盒子纵向排列方式：
center：居中
flex-end：靠下排列
*/
align-items: baseline;
/* 垂直居中 */
align-content: center;
}
.div1{
width: 200px;
height: 200px;
border: 10px solid pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>
<div class="div1">4</div>
<div class="div1">5</div>
</div>
</body>
</html>
07-26
2851
2851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
