响应式网页设计-CSS弹性盒子

CSS 灵活框布局

flex布局元素称为Flex容器(flex container),简称容器。
他的所有子元素自动称为容器成员,称为Flex项目(flex item),简称项目。

display: flex 定位两个盒子

在一个元素的 CSS 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页面
一些元素中添加display: flex ，会自动布局，更好看

flex-direction排列成行或列

排列 flex 容器中的子元素

• row：横向排列（主轴水平方向,起点为左端）

• row-reverse：横向排列（主轴水平方向,起点为右端）

• column：纵向排列（主轴垂直方向,起点为上方）

• column-reverse：纵向排列（主轴垂直方向,起点为下方）

justify-content 属性对齐元素

• center：lex 子元素在 flex 容器中居中排列

• flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置justify-content 的值，那么这就是默认值。

• flex-end：从 flex 容器的终止位置开始排列项目。

对行来说是把项目移至右边， 对于列是把项目移至底部。

• space-between：项目间保留一定间距地沿主轴居中排列。第一个和最后一个项目被放