diff --git a/blog/front-end-combat/demo/felx-wrap.html b/blog/front-end-combat/demo/felx-wrap.html new file mode 100644 index 0000000000000000000000000000000000000000..bfb476a0165317c1dc4ae6ddf56399dcdaf86d37 --- /dev/null +++ b/blog/front-end-combat/demo/felx-wrap.html @@ -0,0 +1,38 @@ + + + + + + + +
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/blog/front-end-combat/demo/flex-align.html b/blog/front-end-combat/demo/flex-align.html new file mode 100644 index 0000000000000000000000000000000000000000..4b20ad93c8256231011ba9f1fb3ef9c5e305f354 --- /dev/null +++ b/blog/front-end-combat/demo/flex-align.html @@ -0,0 +1,102 @@ + + + + + + +

子元素没有设置高度，默认撑开和父级一样高

+
+
+
+
+
+ +

子元素没有设置高度，默认：align-items: stretch;

+
+
+
+
+
+ +

子元素设置高度，默认

+
+
+
+
+
+ +

子元素设置高度，默认：align-items: flex-start;

+
+
+
+
+
+ +

align-items: flex-end;

+
+
+
+
+
+ +

align-items: center;

+
+
+
+
+
+ +

设置单独子元素 align-self: center

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/blog/front-end-combat/demo/flex-direction.html b/blog/front-end-combat/demo/flex-direction.html new file mode 100644 index 0000000000000000000000000000000000000000..27134cd714dadfc993c91253f7031406dce6c8fb --- /dev/null +++ b/blog/front-end-combat/demo/flex-direction.html @@ -0,0 +1,39 @@ + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/blog/front-end-combat/demo/flex-flex.html b/blog/front-end-combat/demo/flex-flex.html new file mode 100644 index 0000000000000000000000000000000000000000..e1304a252b9e15cb1db6ed810d756e72840a2745 --- /dev/null +++ b/blog/front-end-combat/demo/flex-flex.html @@ -0,0 +1,42 @@ + + + + + + + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/blog/front-end-combat/flex.md b/blog/front-end-combat/flex.md index 15cd5500ec87eb2145d5adc12003befb7e3a3670..75df94667ad6304c5e6d1244ed7bf0da6c888197 100644 --- a/blog/front-end-combat/flex.md +++ b/blog/front-end-combat/flex.md @@ -65,6 +65,90 @@ Flex 布局模型中，可以调节主轴或侧轴的对齐方式来设置盒子 [](demo/flex-1.html ':include :type=code') -[](demo/flex-1.html ':include height=900') +[](demo/flex-1.html ':include') -https://www.bilibili.com/video/BV1xq4y1q7jZ?p=67&spm_id_from=pageDriver + + +## 侧轴对齐方式 align-items + +容器属性 align-items +元素属性 align-self + +属性值 | 作用 +- | - +flex-start | 默认值，起点开始依次排列 +flex-end | 重点开始依次排列 +center | 沿侧轴居中排列 +stretch | 默认值，弹性盒子沿着主轴线被拉伸至铺满容器 + +示例: + +[](demo/flex-align.html ':include :type=code') + +[](demo/flex-align.html ':include height=900') + + +## 伸缩比flex + +语法 +```css +flex: 数值; +``` + +> 注意：占用父级剩余尺寸的份数 + +示例: + +[](demo/flex-flex.html ':include :type=code') + +[](demo/flex-flex.html ':include height=220') + + +移动端触发区域默认大小 44x44 + +## 主轴方向 flex-direction + +修改主轴方向，实现改变元素排列方向 + +主轴默认是水平方向，侧轴默认是垂直方向 + +属性值 | 作用 +- | - +row | 默认值，行，水平 +column | 列，垂直 +row-reverse | 行，从右往左 +column-reverse | 列，从下到上 + +示例: + +[](demo/flex-direction.html ':include :type=code') + +[](demo/flex-direction.html ':include height=220') + +## 弹性盒子换行 flex-wrap + +实现多行排列效果 + +语法 +```css +felx-wrap: nowrap/wrap +``` + +属性值 | 作用 +- | - +nowrap | 默认值，不换行 +wrap | 换行 + + +## 行对齐方式 align-content + +取值和justify-content基本相同 + +示例: + +[](demo/felx-wrap.html ':include :type=code') + +[](demo/felx-wrap.html ':include height=620') + + +https://www.bilibili.com/video/BV1xq4y1q7jZ?p=89&spm_id_from=pageDriver \ No newline at end of file