From e12cfe9427c474750cb28b91858ecfc8bd2d7d78 Mon Sep 17 00:00:00 2001 From: bmchu070 <1549098850@qq.com> Date: Tue, 5 Nov 2024 16:57:43 +0800 Subject: [PATCH] 20241104flex --- ...03\345\261\200\346\213\223\345\261\225.md" | 486 ++++++++++++++++++ 1 file changed, 486 insertions(+) create mode 100644 "\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241104-flex\345\270\203\345\261\200\346\213\223\345\261\225.md" diff --git "a/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241104-flex\345\270\203\345\261\200\346\213\223\345\261\225.md" "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241104-flex\345\270\203\345\261\200\346\213\223\345\261\225.md" new file mode 100644 index 0000000..e51fea7 --- /dev/null +++ "b/\347\216\213\350\212\267\345\256\201/\347\254\224\350\256\260/20241104-flex\345\270\203\345\261\200\346\213\223\345\261\225.md" @@ -0,0 +1,486 @@ +## Flex相关属性 + + 1. flex`flex-grow`: 定义了项目在容器中的放大比例。 + + ```css + flex-grow: ; + ``` + + +2. `flex-shrink`: 定义了项目在容器中的缩小比例。 + + ```css + flex-shrink: ; + ``` + +3. `flex-basis`: 定义了项目在容器中的基础大小。 + + css + + ```css + flex-basis: | auto; + ``` + +4. `flex`: `flex-grow`, `flex-shrink`, 和 `flex-basis` 的简写。 + + css + + ```css + flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] + ``` + +5. `order`: 定义了项目的排序顺序。 + + css + + ```css + order: ; + ``` + +6. `align-self`: 允许单个项目覆盖容器的 `align-items` 属性。 + + css + + ```css + align-self: auto | flex-start | flex-end | center | baseline | stretch; + ``` + +这些属性可以组合使用，以实现复杂的布局需求。 + +## 练习 + +### 效果： + +![flex1](../../../../软件/flex1.gif) + +### 代码： + +``` + + + + + + + Document + + + + +
+
+
+
+
+
+ + 999.99万 +
+
+

写点字稍微填充一下

+
+ +
+
+
+ + 999.99万 +
+
+

写点字稍微填充一下

+
+
+
+
+
+
+
+
+ + 999.99万 +
+
+

写点字稍微填充一下

+
+ +
+
+
+ + 999.99万 +
+
+

写点字稍微填充一下

+
+
+
+
+
+
+
+ + 999.99万 +
+
+

写点字稍微填充一下

+
+ +
+
+
+ + 999.99万 +
+
+

写点字稍微填充一下

+
+
+
+
+
+
+
+ + 999.99万 +
+
+

写点字稍微填充一下

+
+ +
+
+
+ + 999.99万 +
+
+

写点字稍微填充一下

+
+
+
+
+ + + + + +``` + +### 效果： + +![flex2](https://gitee.com/BMChu070/ovo/raw/master/imgs/flex2.gif) + +### 代码： + +``` + + + + + + + Document + + + + +
+
+
+
+
+ + + + +``` + +### 效果： + +![image-20241105164843326](https://gitee.com/BMChu070/ovo/raw/master/imgs/image-20241105164843326.png) + +### 代码： + +``` + + + + + + + Document + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + + +``` + -- Gitee