CSS——Flex

任何一个容器都可以指定为Flexbox布局

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

行内元素可以指定Flexbox布局：

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.flex-container {
  flex-direction: row | row-reverse | column | column-reverse;
}

 row:主轴为水平方向（横向），起点在左端；（默认值）

row-reverse:主轴为水平方向，起点在右端；

column：主轴为垂直方向（纵向），起点在上端；

column-reverse：主轴为垂直方向，起点在下端；

 

flex-wrap属性

flex-wrap属性决定内容在