给你一个超强的CSS Flex布局教程

Flex 布局

时尚而又自适应的 Flex 布局

灵活构建

在CSS的领域中，有着各种方式的布局。今天，笔者记录一下自己目前最常用的Flex布局。谁用谁知道，这也太舒爽了😎

前言

先来准备一段html代码，之后的代码解释都是用此代码。

<div class="paren">
  <div class="child1">1</div>
  <div class="child2">2</div>
  <div class="child3">3</div>
</div>

我们给父元素.paren一个flex布局的属性display：flex;

.paren {
  display: flex;
}

flex布局的基本概念：

• flex-direction：决定了子元素是沿着哪个方向排列
• flex-wrap：决定了子元素是否换行
• flex-grow：决定了子元素占据的剩余空间的比例
• flex-shrink：决定了子元素缩小尺寸的比例
• flex-basis：决定了子元素的初始大小

常见弹性盒的排列方式

• 弹性盒排列方式 - 行内

.paren {
  display: flex;
  flex-direction: row;
}

• 弹性盒排列方式 - 行内反向

.paren {
  display: flex;
  flex-direction: row-reverse;
}

• 弹性盒排列方式 - 列内

.paren {
  display: flex;
  flex-direction: column;
}

• 弹性盒排列方式 - 列内反向

.paren {
  display: flex;
  flex-direction: column-reverse;
}

常见弹性盒如何换行

换行 - 不换行

.paren {
  display: flex;
  flex-wrap: nowrap;
}

换行 - 自动换行

.paren {
  display: flex;
  flex-wrap: wrap;
}

常见弹性盒如何增长

增长 - 平均增长

.paren {
  display: flex;
  justify-content: space-around;
}

增长 - 两端增长

.paren {
  display: flex;
  justify-content: space-between;
}

增长 - 起始端增长

.paren {
  display: flex;
  justify-content: flex-start;
}

增长 - 末端增长

.paren {
  display: flex;
  justify-content: flex-end;
}

常见弹性盒如何对齐

对齐 - 主轴居中

.paren {
  display: flex;
  align-items: center;
}

对齐 - 侧轴居中

.paren {
  display: flex;
  align-content: center;
}

进阶使用

使用 flex-grow 来控制子元素的增长比例

.child1 {
  flex-grow: 1;
}

.child2 {
  flex-grow: 2;
}

.child3 {
  flex-grow: 3;
}

使用 flex-shrink 来控制子元素的缩小比例

.child1 {
  flex-shrink: 1;
}

.child2 {
  flex-shrink: 2;
}

.child3 {
  flex-shrink: 3;
}

使用 flex-basis 来控制子元素的初始大小

.child1 {
  flex-basis: 100px;
}

.child2 {
  flex-basis: 200px;
}

.child3 {
  flex-basis: 300px;
}

浏览器兼容性

Flexbox得到了所有主流浏览器的支持，包括IE10+。

结语

Flexbox是一种非常强大的布局工具，可以帮助您创建出各种复杂的布局。如果您还没有使用过Flexbox，那么我强烈建议您学习一下。相信我，您不会后悔的。