对于flex盒子模型,认准主轴和侧轴
父元素和子元素作用,子元素内部不影响
在父元素display:flex开启盒子模型
flex-direction:(主轴)
属性:
flex-direction:row(默认从左向右一排)
flex-direction: row-reverse(从右向左,靠右边)
flex-direction: column;(主轴改变,从上到下)
justify-content(富余空间管理)
属性:
justify-content: flex-start;(内部正常的从左向右,靠左)
justify-content: flex-end;(正常排序从左向右,整体靠右)
justify-content: space-around;(内部各元素直接有相同的间距)
justify-content: space-between;(内部元素,两边靠边,中间各元素直接平均间隔)
justify-content: space-evenly;(内部元素均匀间隔)
align-items(侧轴空间管理)
属性:
align-items: stretch;
align-items: baseline;
align-items: flex-start;
align-items: flex-end;
align-items: center;(侧轴居中)
<style>
/* flex盒子测试 */
.boxflex{
border: 3px red solid;
width: 600px;
height: 500px;
display: flex;
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-around; */
/* justify-content: space-between; */
/* justify-content: space-evenly; */
align-items: stretch;
/* align-items: baseline; */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
}
.boxflex>div{
width: 100px;
height: 100px;
font-size: 30px;
}
.boxflex>div:nth-child(1){
background-color: aqua;
}
.boxflex>div:nth-child(2){
background-color: rgb(255, 0, 200);
}
.boxflex>div:nth-child(3){
background-color: rgb(0, 255, 38);
}
.boxflex>div:nth-child(4){
background-color:blue;
}
</style>
<body>
<div class="boxflex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>