CSS面试问题准备-----CSS布局篇之Flex布局

CSS布局

弹性盒子(Flexbox)

概念：弹性盒子是用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外空间，收缩以适应更小的空间。

为啥要使用弹性盒子呢？

我们知道传统的布局方式通常使用display、float和position来实现的。但是由于他们在某些方面的的局限性，让人难以完成任务或完成起来很复杂。比如以下需求：

• 在一个父内容里垂直居中一个块内容。
• 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
• 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
  对于以上任务，弹性盒子会让他们变得很简单。

指定元素的布局为flexible

首先我们得确定，我们想将哪些盒子设置为弹性盒子。此时我们就需要给这些元素的父元素display设置为flex。如下：

div {
   
	display: flex
}

这里有一个简单的例子：
原始的Html页面如下

使用HTML的语义性标签，创建了一个Header，然后一个包含了三个article标签的section。
当我们在article的父元素section添加了display: flex之后，布局将变为如下一个非常标准的三列布局：