第 12 题：什么是 Flex 布局？

为什么要使用 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 属性

参考资料：
Flex 布局教程：语法篇 - 阮一峰的网络日志

文章的内容/灵感都从下方内容中借鉴

• 【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues

• 【大数据可视化图表插件】https://www.npmjs.com/package/ns-echarts

• 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/