Flex 布局

Flex 布局

Flex布局，可以简便、完整、响应式地实现各种页面布局。也得到了所有浏览器的支持。Webkit内核的浏览器，必须加上-webkit前缀。
所有元素都可以采用Flex布局，采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员，称为Flex项目（flex item）。容器默认存在两根轴：水平的主轴和垂直的侧轴。
Flex 基本使用

<div class="flexContainer">
    <span class="flexItem">1</span>
    <span class="flexItem">2</span>
    <span class="flexItem">3</span>
    <span class="flexItem">4</span>
</div>

/* Flex容器 */
.flexContainer {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    background: rgb(250, 250, 22);
    /* 设置flex布局后,子元素的float,clear,vertical-align都无效 */
    display: -webkit-flex;
    display: flex;
}
/* Flex项目 */
.flexItem {
    width: 120px;
    height: 250px;
    background: #d8fd8d;
    border: 1px solid #424242;
}

效果图：

Flex容器的属性：

• flex-direction
• justify-content
• flex-wrap
• align-items
• align-content
• flex-flow

flex-direction：设置主轴方向

/* Flex容器 */
.flexContainer {
   	width: 510px;
    height: 200px;
    background: skyblue;
    margin: 0 auto;
    /* 设置Flex */
	display: -webkit-flex;
    display: flex;
    /* flex-direction: row; 设置主轴方向,即项目的排列方向，默认row */
    /* 该属性有四个参数可选 */
    flex-direction: row | row-reverse | column | column-reverse;
}
/* Flex项目 */
.flexItem {
    width: 100px;
    height: 70px;
    border: 1px solid #424242;
    background: coral;
}

各属性参数选择效果：

justify-content：设置主轴上的项目的对齐方式

/* Flex容器 */
.flexContainer {
   	width: 510px;
    height: 200px;
    background: darkkhaki;
    margin: 0 auto;
	/* 设置Flex */
	display: -webkit-flex;
    display: flex;
	flex-direction: row;
	/* 该属性有五个可选参数 */
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
/* Flex项目 */
.flexItem {
    width: 70px;
    height: 70px;
    background: coral;
    border: 1px solid #424242;
}

各属性参数选择效果：

flex-wrap：设置项目超出是否换行

/* Flex容器 */
.flexContainer {
   	width: 520px;
    height: 240px;
    background: lightcyan;
    margin: 0 auto;
    display:-webkit-flex;
    display: flex;
    /* flex布局下项目默认不换行,当子元素内容超出,会自动缩小子元素的width与height */
    flex-wrap: nowrap | wrap | wrap-reverse;
}
/* Flex项目 */
.flexItem {
    width: 70px;
    height: 70px;
    background: coral;
    border: 1px solid #424242;
}

各属性参数选择效果：

align-items：设置侧轴上的项目对齐方式(单行)

/* Flex容器 */
.flexContainer {
   	width: 520px;
    height: 240px;
    background: lightcyan;
    margin: 0 auto;
    display:-webkit-flex;
    display: flex;
	/* 该属性有五个可选参数 */
	align-items: flex-start | flex-end | center | baseline | stretch;
}
/* Flex项目 */
.flexItem {
    width: 70px;
    height: 70px;
    background: coral;
    border: 1px solid #424242;
}

各属性参数选择效果：

align-content：设置侧轴上的项目对齐方式(多行)

/* Flex容器 */
.flexContainer {
   	width: 520px;
    height: 240px;
    background: lightcyan;
    margin: 0 auto;
    display:-webkit-flex;
    display: flex;
	/* 该属性有五个可选参数 */
	align-items: flex-start | flex-end | center | baseline | stretch;
}
/* Flex项目 */
.flexItem {
    width: 70px;
    height: 70px;
    background: coral;
    border: 1px solid #424242;
}

各属性参数选择效果：

flex-flow：复合写法
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为flex-direction:row; flex-wrap:nowrap;

/* Flex容器 */
.flexContainer {   	
    display:-webkit-flex;
    display: flex;
	/* flex-direction:row;  flex-wrap:wrap; 简写成 */
	flex-flow: row wrap;
}

Flex项目属性：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order：定义项目的排列顺序
order 数值越小，排列越靠前，默认为0。

<div class="flexContainer">
    <span class="flexItem1">order:0</span>
    <span class="flexItem2">order:-1</span>
</div>

/* Flex容器 */
.flexContainer {
    display:-webkit-flex;
    display: flex;
}
/* Flex项目 */
.flexItem1 {
    /* 默认为0,此处可省略 */
    order: 0;
}
.flexItem2 {
    /* -1比0小所以第二个项目在第一个项目前面 */
    order: -1;
}

效果图：

flex-grow：定义项目的放大比例
默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

<div class="flexContainer">
    <span class="flexItem1"></span>
    <span class="flexItem2"></span>
    <span class="flexItem3"></span>
</div>

/* Flex容器 */
.flexContainer {
    display:-webkit-flex;
    display: flex;
}
/* Flex项目 */
.flexItem1 {
	flex-grow: 1;
}
.flexItem2 {
    flex-grow: 1;
}
.flexItem3 {
    flex-grow: 1;
}

效果图：

flex-shrink：定义了项目的缩小比例
默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

.flexItem {
  	flex-shrink: <number>; /* 默认1 */
}

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间
浏览器根据这个属性，计算主轴是否有多余空间。
它的默认值为auto，即项目的本来大小。

.flexItem {
  	flex-basis: <length> | auto; /* 默认 auto */
}

flex：复合写法
flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 flex-grow：0; flex-shrink：1; flex-basis：auto; 后两个属性可选。

.flexItem{
	/* flex-grow：0; flex-shrink：1; flex-basis：auto; 简写成 */
  	flex: 0 1 auto;
}

align-self：允许单个项目有与其他项目不一样的对齐方式
可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

<div class="flexContainer">
    <span class="flexItem1"></span>
    <span class="flexItem2"></span>
    <span class="flexItem3"></span>
</div>

/* Flex容器 */
.flexContainer {
    display:-webkit-flex;
    display: flex;
}
/* Flex项目 */
.flexItem2 {
	/* 该属性六个可选参数，除了auto，其他都与 align-items 属性参数完全一致 */
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
	align-self: flex-end;
}

效果图：