为什么要使用 Flex 布局？
-
Flex 布局是目前比较流行的一种布局，因为它十分简单灵活，区区简单几行代码就可以实现各种页面的的布局，以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。使用 Flex 属性就可以写出简洁优雅复杂的页面布局
-
目前整理了一些 Flex 布局常用的一些属性，以下简单说一下容器和项目的意思
-
容器：采用 Flex 布局的元素，称为容器
-
项目：指的是容器里面的子元素
-
容器的 6 个属性
-
flex-direction：属性决定主轴的方向（即项目的排列方向）
-
flex-wrap：默认情况下项目都排在一条轴线上，如果一行放不下如何处理（换行方式）
-
flex-flow：flex-direction | flex-wrap（2 个属性的简写）
-
justify-content：项目在主轴上的对齐方式（默认水平对齐方式）
-
align-items：项目在交叉轴上如何对齐（默认垂直对齐方式）
-
align-content：多根轴线的对齐方式（即多行的对齐方式）
项目的 6 个属性
-
order：项目的排列顺序。数值越小，排列越靠前，默认为 0
-
flex-grow：项目的放大（默认指宽度）比例，默认为 0，即如果存在剩余空间，也不放大
-
flex-shrink：项目的缩小（默认指宽度）比例，默认为 1，即如果空间不足，该项目将缩小
-
flex-basis：项目将占据固定空间（默认设置固定宽度）
-
flex：flex-grow | flex-shrink | flex-basis（3 个属性的缩写）
-
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆 align-items 属性
文章的内容/灵感都从下方内容中借鉴
-
【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues
-
【大数据可视化图表插件】https://www.npmjs.com/package/ns-echarts
-
【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/