diff --git "a/\344\275\231\344\270\275/20241028-flex\345\270\203\345\261\200\347\254\224\350\256\260.md" "b/\344\275\231\344\270\275/20241028-flex\345\270\203\345\261\200\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..9ec3dd9dd46806fb78774dfd57649514f17fd8f7 --- /dev/null +++ "b/\344\275\231\344\270\275/20241028-flex\345\270\203\345\261\200\347\254\224\350\256\260.md" @@ -0,0 +1,24 @@ +# flex布局 +1.flex 布局的优势: +* flex 布局的子元素不会脱离文档流,很好地遵从了“流的特性” +* flex 是一种现代的布局方式,是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性,非常灵活,让布局的实现更佳多样化,且方便易用。 + +2.弹性盒子,子元素: +* 弹性盒子:指的是使用 display:flex 或 display:inline-flex 声明的父容器 +* 子元素/弹性元素:指的是父容器里面的子元素们(父容器被声明为 flex 盒子的情况下) + +3. +* 主轴:flex容器的主轴,默认是水平方向,从左向右。 + +* 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向,从上往下。 + +4.display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时,这个父容器里的子元素们,会遵循弹性布局。 + +## flex-direction 属性 +1.flex-direction:用于设置盒子中子元素的排列方向。属性值可以是: + +2.属性值 +* row 从左到右水平排列子元素(默认值) +* column 从上到下垂直排列子元素 +* row-reverse 从右向左排列子元素 +* column-reverse 从上到下垂直排列子元素 \ No newline at end of file