fix

blog/front-end-combat/demo/flex-1.html

+<style>
+    h3 {
+        text-align: center;
+    }
+
+    .box-wrap {
+        display: flex;
+        margin: 0 auto;
+        width: 500px;
+        border: 1px solid #eee;
+    }
+
+    .box-wrap+.box-wrap {
+        margin-top: 20px;
+    }
+
+    .box {
+        width: 100px;
+        height: 100px;
+        font-size: 20px;
+        line-height: 100px;
+        text-align: center;
+        background-color: skyblue;
+    }
+
+    /* 居中 */
+    .box-center {
+        justify-content: center;
+    }
+
+    /* 间距在盒子之间 */
+    .box-between {
+        justify-content: space-between;
+    }
+
+    /* 间距在子两侧，视觉效果：子级之间的距离是两头距离的 2 倍 */
+    .box-around {
+        justify-content: space-around;
+    }
+
+    /* 盒子和容器所有间距相等 */
+    .box-evenly {
+        justify-content: space-evenly;
+    }
+</style>
+
+<h3>默认</h3>
+<div class="box-wrap">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
+
+<h3>justify-content: center;</h3>
+<div class="box-wrap box-center">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
+
+<h3>justify-content: space-between;</h3>
+<div class="box-wrap box-between">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
+
+<h3>justify-content: space-around;</h3>
+<div class="box-wrap box-around">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
+
+
+<h3>justify-content: space-evenly;</h3>
+
+<div class="box-wrap box-evenly">
+    <div class="box">1</div>
+    <div class="box">2</div>
+    <div class="box">3</div>
+</div>
\ No newline at end of file

blog/front-end-combat/flex.md

+# Flex 布局
+
+## 百分比布局
+
+百分比布局也叫流式布局
+
+效果：宽度自适应，高度固定
+
+```css
+width: 100%;
+height: 50px;
+```
+
+## Flex 布局
+
+Flex 布局: 弹性布局
+
+- 浏览器提倡的布局模型
+- 布局网页更简单，灵活
+- 避免浮动脱标的问题
+- 非常适合结构化布局
+
+Float 浮动布局
+
+- 最初为了实现文字环绕
+- Float 布局会造成浮动的盒子脱标，不能撑开父级容器
+
+Flex 布局示例
+
+```css
+.box {
+  display: flex;
+}
+```
+
+![](img/flex.png)
+
+查看 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

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 框架

blog/front-end-combat/mobile.md

+# 移动端网页适配
+
+## 屏幕尺寸
+
+屏幕对角线的长度，一般用英寸来度量
+
+## PC 分辨率
+
+```
+1920 * 1080
+1366 * 768
+```
+
+- 硬件分辨率 物理分辨率 不可改变，固定的
+- 软件分辨率 逻辑分辨率 由软件驱动决定
+
+移动端主流设备分辨率
+
+| 手机型号    | 物理分辨率  | 逻辑分辨率 | 比例关系 |
+| ----------- | ----------- | ---------- | -------- |
+| iPhone6/7/8 | 750 \* 1334 | 375 \* 667 | 2:1      |
+
+## 视口
+
+- 移动端网页宽度默认：`980px`
+- PC 端网页宽度和屏幕宽度相同
+
+视口的作用:
+
+```
+网页宽度 = 逻辑宽度
+```
+
+视口标签
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+```
+
+二倍图：750px