flex布局items元素
items是container的子元素,他会默认继承父元素的flex效果,也就是说只要父元素开启了flex布局那么他就会默认按照flex布局的排列方式进行排列:
<style>
.test{
height: 400px;
width: 400px;
background-color: #f00;
/* 开启flex布局 */
display: inline-flex;
}
.box{
height: 100px;
width: 100px;
}
.box1{
background-color: #ff0;
}
.box2{
background-color: #0f0;
}
.box3{
background-color: #00f;
}
</style>
</head>
<body>
<div class="test">
<div class="box1 box">idems1</div>
<div class="box2 box">idems2</div>
<div class="box3 box">idens3</div>
</div>
</body>
代码效果:
代码中只开启了container的flex布局,但作为块级元素的.box也却也没有独占一行,这就说明了父元素开启了flex布局那么items就会默认按照flex布局的排列方式进行排列