Flex伸缩盒子的实操+详解

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;
}

则，矩形水平方向的顺序就会相反。

垂直方向亦是同理。

——————————————待更新————————————————