1. 容器和容器里的元素
flexbox布局的两个最重要的概念是容器(蓝色)和容器里的子元素(红色)。在本文的例子中，容器和它的子元素都是div。
横向布局
为了实现flex布局，我们需要在容器的CSS里添加如下代码：
.container {
display: flex;
}
效果如下：
纵向布局
在上面的演示中，缺省排列是沿着横坐标方向的，还有一个方向是纵坐标，这个坐标轴的概念在理解flex布局中非常重要。
当我们在容器的CSS里添加flex-direction:column.后，子元素的排列方向就会发生变化。
.container {
display: flex;
flex-direction: column;
}
调整子元素的对齐方式
现在我们让子元素重新横向布局，这需要将flex-direction属性的值从column改成row,子元素就会重新回到横向布局。
调整子元素的对齐方式，我需要使用justify-content和align-items这两个属性，它们控制着子元素的在横向和纵向两方面的定位和对齐方式。
下面我们将要使用justify-content属性让所有子元素都居中对齐：
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
使用align-items属性来控制子元素的竖向对齐方式：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
下面的列表中显示了justify-content和align-items属性可以使用的属性值：
justify-content:
flex-start (default)
flex-end
center
space-between
space-around
align-items:
flex-start(default)
flex-end
center
baseline
stretch
网友评论