关于html:第-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/In…
• 【大数据可视化图表插件】https://www.npmjs.com/package…
• 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/