【高频考点精讲】Flex布局完全攻略：手把手教你用flex实现各种常见布局，面试再也不怕被问

Flex布局完全攻略：手把手教你用flex实现各种常见布局，面试再也不怕被问

今天咱们聊聊前端开发中几乎天天要用到的Flex布局。作为全栈老李，我见过太多同学在面试时被问到Flex布局就支支吾吾，其实这玩意儿真没你想的那么难，掌握好了能让你布局效率提升200%！

一、Flex布局到底是什么？

想象一下你有一排士兵（子元素），Flex容器就是他们的指挥官，可以轻松指挥这些士兵排成一行、一列，还能控制他们之间的间距、对齐方式等等。Flex布局的核心思想就是让容器有能力改变其子元素的宽高和排列顺序，以最佳方式填充可用空间。

Flex布局有两个重要概念：

1. Flex容器（父元素）：通过display: flex或display: inline-flex声明
2. Flex项目（子元素）：容器内的直接子元素

/* 全栈老李提示：这是最基本的Flex容器声明 */
.container {
  display: flex; /* 关键声明 */
  border: 1px solid #ccc;
  padding: 10px;
}

二、Flex容器属性详解

1. flex-direction：决定主轴方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：从左到右水平排列
• row-reverse：从右到左水平排列
• column：从上到下垂直排列
• column-reverse：从下到上垂直排列

2. justify-content：主轴对齐方式

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}