一个示例:子元素垂直排列
二个示例:子元素水平垂直居中
三个示例:子元素三个三列九宫格
<style>
.father {
display: flex; /* 默认子元素水平排列 */
flex-direction: column; /* 垂直排列 */
}
.son {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div class="father">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</body>
二个示例:子元素水平垂直居中
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid red;
display: flex; /* 父元素弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.son {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>
<h1>二个示例:子元素水平垂直居中</h1>
<div class="father">
<div class="son"></div>
</div>
</body>
商品列表--3行3列
<style>
* {
margin: 0;padding: 0;
}
.wrap {
width: 750px;
height: 1000px;
margin: 0 auto;
border: 1px solid red;
}
.nav {
display: flex;
flex-wrap: wrap; /* 换行 */
}
.item {
width: 33.33333%;
height: 200px;
border: 1px solid blue;
box-sizing: border-box;
background-color: white;
}
</style>
<body>
<h1>商品列表--3行3列</h1>
<div class="wrap">
<div class="nav">
<div class="item">手机</div>
<div class="item">电脑</div>
<div class="item">洗衣机</div>
<div class="item">理财产品</div>
<div class="item">亏钱宝</div>
<div class="item">体彩</div>
<div class="item">亏多宝</div>
<div class="item">天天亏宝</div>
<div class="item">彩票</div>
</div>
</div>
</body>