From bee482d804183c39fbcd375489f02bb2582f06d7 Mon Sep 17 00:00:00 2001
From: wengxindong <2092619391@qq.com>
Date: Sun, 10 Nov 2024 19:07:01 +0800
Subject: [PATCH] 11-5tijiao

---
 .../20241104-flex\347\254\224\350\256\260.md" | 137 ++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 "\347\277\201\344\277\241\346\240\213/20241104-flex\347\254\224\350\256\260.md"

diff --git "a/\347\277\201\344\277\241\346\240\213/20241104-flex\347\254\224\350\256\260.md" "b/\347\277\201\344\277\241\346\240\213/20241104-flex\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..88163be
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20241104-flex\347\254\224\350\256\260.md"
@@ -0,0 +1,137 @@
+## flex
+
+### flex 布局的优势
+
+1、**flex 布局的子元素不会脱离文档流**，很好地遵从了“流的特性”。
+
+但如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。
+
+2、**flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范**。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
+
+flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。
+
+### 概念
+
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+在一个弹性盒子里做十个颜色不同，大小相同的弹性元素，在将页面缩小到500px或以内时只显示前五个弹性元素
+
+## 弹性盒子
+
+### 定义
+
+使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。
+
+备注：一般是用 `display:flex`这个属性。`display:inline-flex`用得较少。
+
+### flex-direction 属性
+
+`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值是：
+
+| 属性值 | 描述 |
+|:-------------|:-------------|
+| row | 从左到右水平排列子元素（默认值） |
+|column|从上到下垂直排列子元素|
+| row-reverse |从右向左排列子元素 |
+|column-reverse|从下到上垂直排列子元素|
+
+备注：如果不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。
+
+
+### flex-wrap 属性
+
+`flex-wrap`：控制子元素溢出时的换行处理。
+
+### justify-content 属性
+
+`justify-content`：控制子元素在主轴上的排列方式。
+
+## 弹性元素
+
+### justify-content 属性
+
+- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值是：
+    - `flex-start` 从主轴的起点对齐（默认值）
+    - `flex-end` 从主轴的终点对齐
+    - `center` 居中对齐
+    - `space-around` 在父盒子里平分
+    - `space-between` 两端对齐 平分
+
+### align-items 属性
+
+`align-items`：设置子元素在**侧轴上的对齐方式**。属性值是：
+    - `flex-start` 从侧轴开始的方向对齐
+    - `flex-end` 从侧轴结束的方向对齐
+    - `baseline` 基线 默认同flex-start
+    - `center` 中间对齐
+    - `stretch` 拉伸
+### 作业html代码和效果图如下
+```html
+<style>
+        .div1{
+            display: flex;
+            flex-wrap: wrap;
+         
+        }
+        @media(max-width:500px){
+            .d6,.d7,.d8,.d9,.d10{
+                display: none;
+            }
+            body{
+                flex-direction: column;
+            }
+        }
+        .d1{
+            width: 300px;
+            height: 200PX;
+            background-color: aqua;
+        }
+        .d2{
+            width: 300px;
+            height: 200PX;
+            background-color:red
+        }
+        .d3{
+            width: 300px;
+            height: 200PX;
+            background-color:blue;
+        }
+        .d4{
+            width: 300px;
+            height: 200PX;
+            background-color:rgb(51, 255, 0);
+        }
+        .d5{
+            width: 300px;
+            height: 200PX;
+            background-color:rgb(255, 0, 234);
+            
+        }
+        .d6{
+            width: 300px;
+            height: 200PX;
+            background-color:rgb(255, 0, 76);
+        }
+        .d7{
+            width: 300px;
+            height: 200PX;
+            background-color:rgb(251, 255, 0);
+        }
+        .d8{
+            width: 300px;
+            height: 200PX;
+            background-color:rgb(255, 81, 0);
+        }
+        .d9{
+            width: 300px;
+            height: 200PX;
+            background-color:rgb(132, 0, 255);
+        }
+        .d10{
+            width: 300px;
+            height: 200PX;
+            background-color:rgb(0, 132, 255);
+        }
+    </style>
+```
\ No newline at end of file
-- 
Gitee