目录
一、flex弹性布局
1.作用:可以让我们的盒子并排显示, 并且也可以让行内元素转换为行内块元素。
2.使用:在父盒子上添加属性 display:flex。
注意:使用时要注意 自己的主轴和侧轴的设置,因为一般情况下默认的主轴为X轴的方向,侧轴为y轴方向。
二、父元素属性
1.flex-direction: 设置主轴方向,默认主轴方向为x轴方向,也可设置y轴为主轴。
row(默认的值) row-reverse column column-reverse
2.justify-content: 设置主轴上子元素的排列方式 , 使用前先确定好主轴方向。
flex-start flex-end center space-around space-between*
div{
width: 600px;
height: 800px;
background-color: green;
display: flex;//弹性容器
flex-direction: row;//主轴为x轴
justify-content: space-around;//元素左右两边同等距离分配
flex-wrap: wrap; //允许换行
}
span{
background-color: red;
width: 200px;
height: 200px;
margin: 10px;
}
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
3.flex-wrap: 设置子元素是否换行, 布局中默认不换行。
nowrap(不换行) wrap(换行)
4.align-items:设置侧轴上的子元素排列方式(单行)。
flex-start flex-end center stretch(使用时 子项目不设置高度,使用较少)
5.align-content:设置侧轴上的子元素排列方式(多行),有换行时使用。
flex-start flex-end center space-around space-between stretch
6.flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap。
三、子元素属性
1.flex:子项目占的分数,定义子项目分配剩余空间,用flex来表示占多少份。
2.align-self:控制子项目自己在侧轴的排列方式。
3.order: 定义子项的排列顺序(前后顺序),默认为0,数值越小 排列越靠前。
div{
width: 800px;
height: 200px;
background-color: pink;
display: flex;
/* flex-direction: row;
justify-content: space-between; */
margin: 0 auto;
}
span{
width: 200px;
height: 100px;
background-color: green;
}
.two{
flex: 2;
width: 200px;
height: 100px;
background-color: yellowgreen;
order: -1; //方块2跑到最前面
}
.one {
flex: 1;
width: 200px;
height: 100px;
/* height: 100px; */
}
.three{
flex: 1;
width: 200px;
height: 100px;
align-self: flex-end; //方块3的排列位置
/* order: -1; */
/* height: 100px; */
}
<body>
<div>
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
</div>
</body>
希望我的文章对您有帮助,喜欢的话请点个赞吧!谢谢。