flex 弹性布局,可以让我们的盒子并排显示,并且也可以让行内元素转换为行内块元素。
使用:在父盒子上添加属性 display:flex
flex布局:使用时要注意,自己的主轴和侧轴的设置,因为一般情况下,默认的主轴为x轴的方向,侧轴为y轴方向
<head>
<style>
div {
display: flex;
width: 800px;
height: 500px;
background-color: skyblue;
margin: 0 auto;
/* 设置主轴 */
/* flex-direction: row; */
/* 设置子项目在主轴上的排列方式 */
/* justify-content: center; */
/* flex布局 默认不进行换行,所有子项目会在一行显示,并平均分配父容器的宽度。 */
/* flex-wrap: wrap; */
/* 注意:只有在单行的情况下,才能使用align-items */
/* align-items: stretch; */
/* 多行情况下下,子项目对于侧轴的排列方式 */
align-content: space-around;
/* 复合型写法,