From 937951c7c43035cef41320f3fff31033bf6dbcc1 Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Sat, 19 Feb 2022 16:18:52 +0800
Subject: [PATCH] fix
---
blog/front-end-combat/demo/felx-wrap.html | 38 +++++++
blog/front-end-combat/demo/flex-align.html | 102 ++++++++++++++++++
.../front-end-combat/demo/flex-direction.html | 39 +++++++
blog/front-end-combat/demo/flex-flex.html | 42 ++++++++
blog/front-end-combat/flex.md | 88 ++++++++++++++-
5 files changed, 307 insertions(+), 2 deletions(-)
create mode 100644 blog/front-end-combat/demo/felx-wrap.html
create mode 100644 blog/front-end-combat/demo/flex-align.html
create mode 100644 blog/front-end-combat/demo/flex-direction.html
create mode 100644 blog/front-end-combat/demo/flex-flex.html
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 0000000..bfb476a
--- /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 0000000..4b20ad9
--- /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 0000000..27134cd
--- /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 0000000..e1304a2
--- /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 15cd550..75df946 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
--
GitLab