使用flexbox推进CSS布局

它也被称为柔性箱模型。它基本上是一个布局模型，提供了一种简单、干净的方式来安排容器中的项目。Flexbox不同于垂直偏移的块模型和水平偏移的内联模型。Flexbox是为小规模的布局而创建的，还有另一个叫做grids的标准，它更适合于大规模的布局，它的工作方式类似于Twitter引导网格系统的工作方式。Flexbox响应迅速，便于移动。从flexbox开始，首先创建一个flex容器。要创建flex容器，请将display属性设置为flex。

例子：

.main-container {
  display: flex;
}

Flex属性：

• 弯曲方向
• 柔性包装
• 弹性流
• 证明内容正当
• 对齐项目
• 对齐内容

弯曲方向： 柔性方向用于定义柔性项目的方向。在flexbox中，默认轴是水平的，因此项目会流入一行。

语法：

// Stacking flex items column wise
flex-direction: column;

// Stacking flex items from bottom to top
flex-direction: column-reverse;

// Stacking flex items row wise
flex-direction: row;

// Stacking flex items from right to left
flex-direction: row-reverse;

例子：

输出：

柔性包装： flex wrap属性用于定义flex项的包装。如果flex wrap属性设置为wrap，则浏览器的窗口会设置该框。如果浏览器窗口小于元素，则元素会向下移动到下一行。

语法：

// Wrap flex items when necessary
flex-wrap: wrap;

// Flex items will not wrap
flex-wrap: nowrap;

例子：

输出：

注： flex flow是flex direction和flex wrap的缩写。 语法：

flex-flow: row wrap;

证明内容正确： justify content属性用于根据flexbox容器内的主轴对齐flex项。

语法：

// Aligns the flex items at the center
justify-content: center;

// The space is distributed around the flexbox items
//and it also adds space before the first item and after the last one.
justify-content: space-around;

// Space between the lines
justify-content: space-between;

// Aligns the flex items at the beginning of the container
justify-content: flex-start;

// Aligns the flex items at the end of the container
justify-content: flex-end;

例子：

输出：

对齐项目： 此属性用于根据横轴垂直对齐弹性项。 语法：

// Aligns the flex items in the middle of the container
align-items: center;

// Flexbox items are aligned at the baseline of the cross axis
align-items: baseline;

// Stretches the flex items
 align-items: stretch;

// Aligns the flex items at the top of the container
align-items: flex-start;

// Aligns elements at the bottom of the container
align-items: flex-end;

例子：

输出：

对齐内容： 此属性定义了flexbox中每条柔性线的对齐方式，并且仅在应用flex wrap:wrap时适用，即存在多行flexbox项目时。 语法：

// Displays the flex lines with equal space between them
align-content: space-between;

// Displays the flex lines at the start of the container
align-content: flex-start;

// Displays the flex lines at the end of the container
 align-content: flex-end;

// Dy using space-around property space will be 
// Distributed equally around the flex lines
align-content: space-around;

// Stretches the flex lines
align-content: stretch;

例子：

输出：