一篇文章让你了解CSS中flex布局中的弹性布局

flex主要是分为两种。一种是弹性布局，一种是网格布局。今天我们主要了解弹性布局。
弹性布局：
默认情况下，在弹性盒子中子元素都是左右排列的。并且在默认情况下，水平是主轴。宽高不写的情况下，宽度是由内容决定的。
默认情况下，当子项的宽度大于父容器的宽度时，会自动收缩，也就是说弹性的优先级是大于自身固定大小的。并且当子项的内容已经达到父容器最小宽高的时候就会出现溢出的效果。
弹性布局的优点：它的优势是做一维布局
以下是我列出的在弹性布局中比较常用的几个语法。都是我这经常用到的几个语法。
语法加在父容器上的：
display:flex;(把布局变成弹性布局。是加在父容器上的。)
flex-direction:
(row是默认值，显示为行。方向是当前文档的水平流方向，默认情况下是从左往右的。
row-reverse 显示为行。但方向和row属性值是反的
column 显示为列
column-reverse 显示为列。但方向和column属性值是反的）
flex-wrap : nowrap; 是否进行换行处理。
wrap; 换行处理
wrap-reverse; 反向换行
flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。
justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。
flex-start ：子项都去起始位置对齐。
flex-end ：子项都去结束位置对齐。
center ：子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
align-items : 每一行中的子元素上下对齐方式。
flex-start;
center;
flex-end;
默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
值跟justify-content取值是相同的。
语法在子容器上的：
order：排序
flex-grow:扩展（想看到扩展的效果就必须有空隙）
0：默认值 1：把剩下的空白的位置全部占满。
flex-shirnk:收缩正常的默认值是1 0表示不收缩。
align-self：跟align-items操作很像，区别在于只是针对一个子元素。（逆战班）

以下代码就是用弹性布局做的骰子六面

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box .box1{width: 70px;height: 70px;border: black solid 1px;border-radius: 5px;;display: flex;

justify-content: center; align-items: center;margin: 40px;}

.box .box1 div{width: 10px;height: 10px;border-radius: 5px; background-color: black;}

.box .box2{width: 70px;height: 70px;border: black solid 1px;border-radius: 5px;;display: flex;

justify-content: space-between; margin: 40px;}

.box .box2 div{width: 10px;height: 10px;border-radius: 5px; background-color: black;margin: 5px;}

.box2 div:nth-of-type(2){align-self: flex-end;}

.box .box3{width: 70px;height: 70px;border: black solid 1px;border-radius: 5px;;display: flex;

justify-content: center;

margin: 40px;}

.box .box3 div{width: 10px;height: 10px;border-radius: 5px; background-color: black;margin: 5px;}

.box3 div:nth-of-type(1){justify-content: space-between;}

.box3 div:nth-of-type(2){ align-self: center;}

.box3 div:nth-of-type(3){align-self: flex-end;}

.box .box4{width: 70px;height: 70px;border: black solid 1px;border-radius: 5px;

margin: 40px;}

.box .box4 div{height:50%;justify-content: space-around;display: flex;

align-items: center;}

.box4 div i{display: block; width: 10px;height: 10px;border-radius: 5px;

background-color: black;margin: 5px;}

.box .box5{width: 70px;height: 70px;border: black solid 1px;border-radius: 5px;

margin: 40px;}

.box .box5 div{height:33.3%;justify-content: space-around;display: flex;

align-items: center;}

.box5 div i{display: block; width: 10px;height: 10px;border-radius: 5px;

background-color: black;margin: 5px;}

.box .box6{width: 70px;height: 70px;border: black solid 1px;border-radius: 5px;

margin: 40px;}

.box .box6 div{height:33.3%;justify-content: space-around;display: flex;

align-items: center;}

.box div i{display: block; width: 10px;height: 10px;border-radius: 5px;

background-color: black;margin: 5px;}

</style>

</head>

<body>

</div>

</div>

</div>

<div>

<i></i>

</div>

<div>

<i></i>

</div>

<div>

<i></i>

</div>

<div>

<i></i>

</div>

<div>

<i></i>

</div>

<i></i>

</div>

<div>

<i></i>

</div>

</body>

</html>

一篇文章让你了解CSS中flex布局中的弹性布局

猜你喜欢