diff --git a/blog/front-end-combat/demo/flex-1.html b/blog/front-end-combat/demo/flex-1.html
new file mode 100644
index 0000000000000000000000000000000000000000..9a9103beb02372253600c96bc996a0dfbf667c1b
--- /dev/null
+++ b/blog/front-end-combat/demo/flex-1.html
@@ -0,0 +1,82 @@
+
+
+默认
+
+
+justify-content: center;
+
+
+justify-content: space-between;
+
+
+justify-content: space-around;
+
+
+
+justify-content: space-evenly;
+
+
\ No newline at end of file
diff --git a/blog/front-end-combat/flex.md b/blog/front-end-combat/flex.md
new file mode 100644
index 0000000000000000000000000000000000000000..b212874e2b55c2b7ee7846b7c33e625582ae9051
--- /dev/null
+++ b/blog/front-end-combat/flex.md
@@ -0,0 +1,70 @@
+# Flex 布局
+
+## 百分比布局
+
+百分比布局也叫流式布局
+
+效果：宽度自适应，高度固定
+
+```css
+width: 100%;
+height: 50px;
+```
+
+## Flex 布局
+
+Flex 布局: 弹性布局
+
+- 浏览器提倡的布局模型
+- 布局网页更简单，灵活
+- 避免浮动脱标的问题
+- 非常适合结构化布局
+
+Float 浮动布局
+
+- 最初为了实现文字环绕
+- Float 布局会造成浮动的盒子脱标，不能撑开父级容器
+
+Flex 布局示例
+
+```css
+.box {
+ display: flex;
+}
+```
+
+
+
+查看 web 技术浏览器兼容性：
+
+https://caniuse.com/
+
+Flex 布局组成部分
+
+- 弹性容器： 直接父级
+- 弹性盒子：直接子级
+- 主轴：默认 x 轴
+- 侧轴/交叉轴：默认 y 轴
+
+flex 容器下的元素默认水平排列：默认主轴在 x 轴，弹性盒子沿着主轴排列
+
+## 主轴对齐方式 justify-content
+
+Flex 布局模型中，可以调节主轴或侧轴的对齐方式来设置盒子之间的间距
+
+| 属性值 | 作用 |
+| ------------- | ---------------------------------------------------- |
+| flex-start | 默认值，起点开始依次排列 |
+| flex-end | 终点开始依次排列 |
+| center | 沿主轴居中排列 |
+| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性[盒子两侧] |
+| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在相邻[盒子之间] |
+| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间[间距相等] |
+
+示例:
+
+[](demo/flex-1.html ':include :type=code')
+
+[](demo/flex-1.html ':include height=900')
+
+https://www.bilibili.com/video/BV1xq4y1q7jZ?p=67&spm_id_from=pageDriver
diff --git a/blog/front-end-combat/img/flex.png b/blog/front-end-combat/img/flex.png
new file mode 100644
index 0000000000000000000000000000000000000000..b064abb9b4cc83a90fc910ad7fceb92a097bfa4e
Binary files /dev/null and b/blog/front-end-combat/img/flex.png differ
diff --git a/blog/front-end-combat/index.md b/blog/front-end-combat/index.md
index 6a6cc506259c3ba3b06bd9e567e39050a85f632e..198b34131e2fda9823115bc244d24d42c3b3d517 100644
--- a/blog/front-end-combat/index.md
+++ b/blog/front-end-combat/index.md
@@ -10,7 +10,8 @@
4. [动画 animation](blog/front-end-combat/animation.md)
-- css3 平面、渐变、动画属性
-- Flex 布局
-- 移动适配
+5. [移动端网页适配](blog/front-end-combat/mobile.md)
+
+6. [Flex 布局](blog/front-end-combat/flex.md)
+
- 响应式 BootStrap 框架
diff --git a/blog/front-end-combat/mobile.md b/blog/front-end-combat/mobile.md
new file mode 100644
index 0000000000000000000000000000000000000000..a7618505cd2ca17f30ff4ecae0efcb98eaa91a20
--- /dev/null
+++ b/blog/front-end-combat/mobile.md
@@ -0,0 +1,40 @@
+# 移动端网页适配
+
+## 屏幕尺寸
+
+屏幕对角线的长度，一般用英寸来度量
+
+## PC 分辨率
+
+```
+1920 * 1080
+1366 * 768
+```
+
+- 硬件分辨率 物理分辨率 不可改变，固定的
+- 软件分辨率 逻辑分辨率 由软件驱动决定
+
+移动端主流设备分辨率
+
+| 手机型号 | 物理分辨率 | 逻辑分辨率 | 比例关系 |
+| ----------- | ----------- | ---------- | -------- |
+| iPhone6/7/8 | 750 \* 1334 | 375 \* 667 | 2:1 |
+
+## 视口
+
+- 移动端网页宽度默认：`980px`
+- PC 端网页宽度和屏幕宽度相同
+
+视口的作用:
+
+```
+网页宽度 = 逻辑宽度
+```
+
+视口标签
+
+```html
+
+```
+
+二倍图：750px