【CSS3】flex 弹性盒用法

一、基本介绍

• 弹性布局flex是 CSS3 的一种新的布局模式。
• CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

浏览器支持

• 定义：弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

.box{ 
	display: flex; 
}

• 特性：

1. 弹性容器内包含了一个或多个弹性子元素
2. 弹性盒子只定义了弹性子元素如何在弹性容器内布局
3. 弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行
4. 设为弹性盒以后，子元素的float、clear和vertical-align属性将失效

二、容器属性

2.1、flex-direction（纵横排列）

• flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。

语法：

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

• 默认值为：flex-direction : row ;

属性值	描述
row	横向排列，从左到右
column	纵向排列，从上到下
row-reverse	横向排列，从右到左
column-reverse	纵向排列，从下到上

2.2、flex-wrap（是否换行）

• flex-wrap 属性规定是否应该对 flex 项目换行。

语法：

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

• 默认值为：flex-wrap : nowrap ;

属性值	描述
nowrap	默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse	反转 wrap 排列。

2.3、flex-flow（简写属性）

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

语法：

.box {
  flex-flow:  || ;
}

2.4、justify-content（左右对齐）

• justify-content 属性用于对齐 flex 项目

语法：

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• 默认值为：justify-content : flex-start ;

属性值	描述
center	将 flex 项目在容器的中心对齐
flex-start	将 flex 项目在容器的开头对齐
flex-end	将 flex 项目在容器的末端对齐
space-between	显示行之间有空格的 flex 项目
space-around	显示行之前、之间和之后带有空格的 flex 项目

2.5、align-items（行内垂直对齐）

• align-items 属性用于行内垂直对齐里面的 flex 项目。

语法：

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• 默认值为：align-items: stretch ;

属性值	描述
center	将 flex 项目在容器中间对齐
flex-start	将 flex 项目在容器顶部对齐
flex-end	将 flex 项目在容器底部对齐
stretch	拉伸 flex 项目以填充容器（默认）
baseline	使 flex 项目基线对齐

2.6、align-content（行的垂直对齐）

• align-content 属性用于对齐弹性线。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法：

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• 默认值为：align-content: stretch ;

属性值	描述
stretch	各行将会伸展以占用剩余的空间。
flex-start	各行向弹性盒容器的起始位置堆叠。
flex-end	各行向弹性盒容器的结束位置堆叠。
center	各行向弹性盒容器的中间位置堆叠。
space-between	显示的弹性线之间有相等的间距。
space-around	显示弹性线在其之前、之间和之后带有空格

三、项目属性

flex 容器的直接子元素会自动成为弹性（flex）项目。

3.1、order（排列顺序）

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

语法：

.item {
  order: ;
}

属性值：
integer：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

3.2、align-self（自身垂直对齐）

align-self 属性：用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

属性值：

• auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

3.3、flex-grow（放大占比：0）

• flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。
• 默认为0，即如果存在剩余空间，也不放大。

语法：

.item {
  flex-grow: ; /* default 0 */
}

说明：

• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
• 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.4、flex-shrink（缩小占比：1）

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

• flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。
• 默认为1，即如果空间不足，该项目将缩小。

语法：

.item {
  flex-grow: ; /* default 1 */
}

说明：

• 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
• 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

3.5、flex-basis（项目长度）

• flex-basis 属性规定 flex 项目的初始长度。

语法：

.item {
  flex-basis:  | auto; /* default auto */
}

属性值	描述
auto	默认值，即项目的本来大小
length	长度单位值，如350px，表示项目将占据固定空间

3.6、flex（简写属性）

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

语法：

.item {
  flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>;;
}

• 示例：使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素

<div class="flex-container">
  <div>1div>
  <div>2div>
  <div style="flex: 0 0 200px">3div>
  <div>4div>
div>