diff --git "a/\351\255\217\346\205\247\345\251\267/20241028-flex\345\270\203\345\261\200.md" "b/\351\255\217\346\205\247\345\251\267/20241028-flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241028-flex\345\270\203\345\261\200.md" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241028-flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..408a444914575f2b96162cdd9601a09aea8b17f7 --- /dev/null +++ "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241028-flex\345\270\203\345\261\200.md" @@ -0,0 +1,41 @@ +### Flexbox的基本概念 +1. Flex容器（Flex Container）： ++ 使用display: flex或display: inline-flex的元素。 ++ 容器内的直接子元素称为Flex项目（Flex Items）。 +2. Flex项目（Flex Items）： ++ Flex容器内的直接子元素自动成为Flex项目。 +### Flex容器属性 ++ display: flex; 或 display: inline-flex;：定义容器为Flex容器。 ++ flex-direction：定义主轴的方向（默认是row，即水平方向）。 ++ row：水平方向，从左到右。 ++ row-reverse：水平方向，从右到左。 ++ column：垂直方向，从上到下。 ++ column-reverse：垂直方向，从下到上。 ++ flex-wrap：定义项目是否换行。 ++ nowrap（默认）：不换行。 ++ wrap：换行。 ++ wrap-reverse：反向换行。 ++ flex-flow：flex-direction 和 flex-wrap 的简写。 ++ justify-content：定义项目在主轴上的对齐方式。 ++ flex-start（默认）：起点对齐。 ++ flex-end：终点对齐。 ++ center：居中对齐。 ++ space-between：两端对齐，项目之间的间隔相等。 ++ space-around：每个项目两侧的间隔相等。 ++ space-evenly：所有项目之间的间隔相等，包括两端。 ++ align-items：定义项目在交叉轴上的对齐方式。 ++ stretch（默认）：如果项目未设置高度或设为auto，将占满整个容器的高度。 ++ flex-start：交叉轴的起点对齐。 ++ flex-end：交叉轴的终点对齐。 ++ center：居中对齐。 ++ baseline：项目的基线对齐。 ++ align-content：定义多行时的对齐方式（当flex-wrap: wrap时使用）。 ++ 类似align-items，但适用于多行。 +### Flex项目属性 ++ order：定义项目的排列顺序（数值越小，排列越靠前，默认值为0）。 ++ flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 ++ flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 ++ flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。可以是长度值（如20px）或百分比（如30%），默认值为auto。 ++ flex：flex-grow、flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。 ++ align-self：允许单个项目有与其他项目不同的对齐方式，可覆盖align-items属性。 ++ 值同align-items。 \ No newline at end of file diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\272\214\345\215\201\344\271\235\345\212\250\347\224\273.html" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\272\214\345\215\201\344\271\235\345\212\250\347\224\273.html" new file mode 100644 index 0000000000000000000000000000000000000000..f075aab28e0eef6d18ec099718abbf90b22d68c5 --- /dev/null +++ "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\272\214\345\215\201\344\271\235\345\212\250\347\224\273.html" @@ -0,0 +1,137 @@ + + + + + + Document + + + +

1.基础布局练习： + 创建一个包含三个子元素的容器，并使用display: flex;将其设置为Flex容器。 + 确保这三个子元素在容器中水平排列

+
+
+
+
+
+

2.主轴对齐练习： + 使用justify-content属性，将上述练习中的子元素在主轴（默认为水平方向）上居中对齐。 + 将子元素在主轴上分散对齐，使用space-between和space-around属性

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

3.交叉轴对齐练习： + 使用align-items属性，将子元素在交叉轴（默认为垂直方向）上居中对齐。 + 尝试使用flex-start和flex-end属性，使子元素在交叉轴上分别对齐到顶部和底部

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

4.主轴方向练习： + 使用flex-direction属性，将子元素的方向从水平改为垂直。 + 观察容器和子元素的排列方式如何变化。

+
+
+
+
+
+ + \ No newline at end of file