弹性布局是目前主流的布局方式，相比之前的盒子模型而言，使用弹性盒子更加方便快捷。弹性布局还广泛应用于H5页面与小程序页面，是一种非常重要布局方法。
先说一下弹性布局的基本原理：
它是通过定义一个弹性盒子，然后使用一些属性可以控制盒子内部元素的排列方式。例如横向、纵向、横向倒序，纵向倒序。
而且，弹性盒子内部的元素尺寸也会被弹性盒子所限制，不足就自动拉伸，超出就自动缩小。
而且，还可以通过简单的属性设置控制弹性盒子内部元素的间距。
所以，在大多数情况下，如果使用弹性布局，我们几乎不需要使用定位，很快就可以将页面排版出来。
文本先从如何定义一个弹性盒子讲起。
在页面中定义一个div，使用css选择器选中该div，设置css属性为display:flex;，此时该div就是一个弹性盒子，在该盒子内部的元素，可以由弹性布局系列属性来控制。
然后请看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子的定义以及四种排列方式</title>
</head>
<style>
.box{
width:400px;
height:500px;
border:1px solid #000;
/* 设置弹性容器 */
display:flex;
/* 纵向倒序排列 */
flex-direction:column-reverse;
/* 纵向排列 */
/* flex-direction: column; */
/* 横向反向排列 */
/* flex-direction: row-reverse; */
/* 横向排列 */
/* flex-direction: row; */
}
.box div{
width:150px;
height:200px;
border: 5px solid #0f0;
}
</style>
<body>
<div class="box">
<div>第一个盒子</div>
<div>第二个盒子</div>
<div>第三个盒子</div>
</div>
</body>
</html>
以上HTML代码中，我们在一个class为box的盒子中定义了三个子盒子，使用css选择器将父盒子设置为弹性盒子，然后再设置父盒子的CSS属性，里面写针对子盒子的排列方式。
上图说明了代码中的四种排列方式的效果，大家可以把以上代码复制出来自己测试一下。
|
窥视卡
雷达卡
发表于 2023-2-1 20:28:24
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 16:34:45
