Flex布局常用属性有哪些？

Flex布局，也就是我们常说的弹性盒子，它彻底改变了CSS的布局方式。以前那些用浮动和定位实现的复杂效果，现在用几行属性就能轻松搞定。作为前端工程师，它绝对是必须熟练掌握的核心工具。

Flex布局的属性分为两大部分：作用于容器的，和作用于容器内项目的。咱们先看容器属性，这是开启一切的关键。你只需要给父元素设置display: flex，它立刻就成了一个Flex容器。

.container {
  display: flex;
}

光有这一句，里面的子元素就会自动排成一行。接下来，控制主轴对齐的justify-content和控制交叉轴对齐的align-items是你最常用的。它们负责处理水平和垂直方向的排列与对齐，是居中等需求的首选方案。

.container {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
  flex-direction: row;     /* 主轴方向：行 */
  flex-wrap: wrap;         /* 允许换行 */
}

flex-direction决定了子元素的排列方向，是横着排还是竖着排。flex-wrap则控制当一行放不下时是否换行，它与flex-direction的缩写flex-flow常常结合使用。

另一组重要的属性是作用于子项（项目）上的。flex这个属性是flex-grow（放大比例）、flex-shrink（缩小比例）和flex-basis（初始尺寸）的简写，它决定了项目如何分配剩余空间或收缩以适应容器。

.item {
  flex: 1; /* 常见写法，意为均分空间 */
  order: 2; /* 控制排列顺序 */
  align-self: flex-start; /* 单独设置交叉轴对齐 */
}

order属性可以调整项目的显示顺序，而align-self允许某个项目有不同于其他项目的对齐方式。

掌握这些核心属性，你就能应对绝大多数的一维布局需求。在HTML5和现代Web开发中，Flexbox与Grid布局相辅相成。我的建议是，先从理解主轴和交叉轴的概念开始，然后多写多试，把这些属性用起来。当你习惯用justify-content: space-between来平均分布导航项，或者用align-items: stretch来撑满高度时，你就真正体会到它的高效了。