CSS中display flex整理（布局利器）

2024-09-08 18:17:13

字體：大中小

來源：轉載

供稿：網友

關于display：flex布局，有人了解頗深，我也是看著別人的東西學習的。

display：flex的布局是什么、基本概念之類的我根本就不了解，只會用。每次看到概念之類的東西，我都是掃一眼就過去。

第一個屬性和用法：flex-direction

我了解的方法有4個：row（水平排列）、row-revese（水平反向排列）、column（垂直排列）、column-reserve（垂直反向排列）


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:300px;border:1px solid red;display: flex;flex-direction: row;">
<div style="width: 100px;height: 100px;background-color: black;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;"></div>
<div style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</body>
</html>

上面的代碼和效果圖是屬性為row時的效果

注意：雖然是設置好的寬度，但是父容器只有300px，子div沒法達到100px，而是適應父容器

只需要將 flex-direction: row代碼替換成flex-direction:row-revese 或者flex-direction:column 或則flex-direction:column-reserve，就可以得到不同的效果

下面是效果圖：

row-revese

——-

column

——-

column-reverse

——-

第二個屬性和用法：flex-wrap

這是換行屬性：nowrap（不換行）、wrap（換行）、wrap-reverse（方向換行）


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
<div style="width: 100px;height: 100px;background-color: black;"></div>
<div style="width: 100px;height: 100px;background-color: green;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;"></div>
<div style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
</body>
</html>