<!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>
css布局
最新推荐文章于 2024-08-18 22:35:37 发布