Flex + Margin 神奇组合，打造灵活布局！

在前端布局中，flex 布局已成为主流，而 margin 作为 CSS 盒模型的基础属性，常用于元素的间距调整。Flex 布局 + Margin 的组合可以实现灵活的间距控制，同时兼顾 自适应布局 和 元素对齐，非常适用于复杂页面的组件排布。

1. Flex + Margin 的关系

1.1 Flex 负责主轴排列

在 display: flex; 容器内，默认情况下：

• flex-direction: row; 让子元素水平排列。
• flex-direction: column; 让子元素垂直排列。

1.2 Margin 负责间距

margin 主要用于外边距控制，推开元素。

• margin: auto; 在 flex 布局下能实现自动居中或等间距对齐。
• margin: 0 auto; 可用于 flex 布局中的水平居中。
• margin-left: auto; 或 margin-right: auto; 可以推动元素到主轴两端。

2. 基础 🌰

2.1 margin: auto 子元素自动居中

<div class="container">
  <div class="item"></div>
</div>

justify-content 或 align-items 实现： 

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid palevioletred;
  padding: 10px;
  height: 300px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: pink;
}

 margin 实现：

.container {
  display: flex;
  border: 3px solid palevioletred;
  padding: 10px;
  height: 300px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: pink;
  margin: auto;
}

margin: auto 在 flex 容器中可以让元素在水平和垂直方向都居中。

适用于 单个元素需要居中 的情况。

2.2 margin-left: auto 推动元素到右侧