为什么要使用 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 布局教程：语法篇 - 阮一峰的网络日志​​