Flex伸缩盒子的实操+详解
Flex布局能够针对CSS重难以实现的的类似:垂直居中、线轴排序、交叉轴对齐等进行封装。我们就可以简便、完整、响应式地实现各种页面布局
一、 flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
它含有四个值,分别是:
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
首先我们先在html中新建3个等大的矩形:
index.html
<div class="box">
<div class="square">A</div>
<div class="square">B</div>
<div class="square">C</div>
</div>
在css里的box样式类里必须添加display: flex;
这是引入flex布局的关键。
demo.css
.square{
height: 150px;
width: 1000px;
border:1px solid #000;
background-color: aqua;
display: inline;
}
.box{
display: flex;
flex-direction: row;
}
因为屏幕宽度的改变,div.square的宽度也随之改变,但三个举行的比例仍未1:1:1。
若将flex-direction:row;
改为flex-direction:row-reverse;
demo.css
.box{
display: flex;
/* flex-direction: row; */
flex-direction: row-reverse;
}
则,矩形水平方向的顺序就会相反。
垂直方向亦是同理。
——————————————待更新————————————————