CSS基础

Flex 弹性盒

• 2009年，W3C 提出了一种新的方案--Flex 布局，可以简便、完整、响应式地实现各种页面布局。
• 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

/* 任何一个容器都可以指定为 Flex 布局。*/
.box{
  display: flex;
  display: -webkit-flex; /* Safari    Webkit 内核加上 -Webkit- 前缀*/

}

/* 行内元素也可以使用 Flex 布局。*/
.box{
  display: inline-flex;
    display: -webkit-inline-flex;
}

概念

使用flex布局的的元素被称为“容器”，而其子元素被称为“Flex项目” 容器默认存在两条相互垂直的轴：

• 水平的主轴（main axis）
• 垂直的交叉轴（cross axis）

容器的属性

• flex-direction ：（属性决定主轴的方向。）
• flex-wrap ：（定义项目如果一条轴线排不下时，如何换行）
• flex-flow ：（flex-direction属性和flex-wrap属性的简写）
• justify-content ：项目在主轴上的对齐方式
• align-items ：项目在交叉轴上如何对齐
• align-content ：多根轴线的对齐方式

1.flex-direction属性

决定主轴的方向（即项目的排列方向）

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。 示例：

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

2.flex-wrap属性

默认情况下，项目都排在一条线上。flex-wrap定义项目如果一条轴线排不下，如何换行

• nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。 示例：

.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

2.flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写。

• row nowrap（默认）：主轴为横轴，不换行。

示例：

.box {
    flex-flow: <flex-direction> || <flex-wrap>;
}