弹性盒子的概念和属性

传统布局基于盒装模型，在有些布局中非常不方便，基于此，w3c提出了新的布局方式——Flex布局。

任何容器都可以指定为Flex布局，其格式如下：

.box{

display:flex;

}

一、概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

它有两个轴：水平的主轴和垂直的交叉轴

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

二、属性

flex-direction 决定主轴方向(即项目的排列方向)

flex-wrap 定义一排排不下，如何换行

• nowrap 不换行
• wrap 换行，第一行在上
• wrap-reserve 换行，第一行在下

flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content  定义了项目在主轴上的对齐方式

• flex-start  默认  左对齐
• center  居中
• flex-end  右对齐
• space-between  两端对齐，项目之间间隔相等
• space-around 每个项目的间隔相等

align-items  定义项目在交叉轴上如何对齐。

• flex-start  交叉轴的起点对齐
• flex-end  交叉轴的终点对齐
• center 交叉轴的中点对齐
• baseline  项目的第一行文字基线对齐
• stretch  默认值  如果未设置高度，将占满整个容器

align-content  定义了多根轴线的对齐方式。

• flex-start  与交叉轴的起点对齐
• flex-end 与交叉轴的终点对齐
• center 与交叉轴的中点对齐
• space-between  与交叉轴两端对齐，轴线之间的间隔平均分配
• space-around  每根轴线两侧间隔相等
• stretch  默认值 轴线占满整个交叉轴