---
title: CSS布局(2) - Flex
date: 2018-5-15 22:38:32
tags:
- 前端
- css
categories:
- 前端杂烩
---
Flex是`Flexible Box`的缩写，意为`弹性布局`，用来为盒状模型提供最大的灵活性。
目前，它已经得到了所有浏览器的支持
Flex布局将成为未来布局的首选方案
任何一个容器都可以指定为flex布局
```css
/*对于块元素*/
.box {
display : flex;
}
/*对于行内元素*/
.inline-box {
display : inline-flex;
}
```
为了兼容性的需要 , 通常可以加上`display:-webkit-flex;`
> 设为Flex布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效
### Flex容器的基本模型
采用了flex布局的元素 , 可以称之为`Flex容器` , 它的子元素自动成为这个容器的成员 , 被称为`Flex项目`
容器默认存在两根轴：水平的`主轴（main axis）`和竖直的`交叉轴（cross axis）`。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。
项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。
### Flex容器的属性
#### flex-direction
决定主轴的方向 , 也就是项目的排列方向
row(默认) | row-reverse | column | column-reverse
#### flex-wrap
默认情况下 , 项目都排列在一条轴线上 , 该属性定义了当一条轴线排列不下的时候 , 如何换行
nowrap(默认) | wrap | wrap-reverse
#### flex-flow
这个属性是上面两个属性的简写形式 , 例如
flex-flow : column wrap , 就相当于 flex-direction:column;flex-wrap:wrap;
#### justify-content
项目在主轴上的对其方式
flex-start(默认) | flex-end | center | 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(默认)
### 项目的属性
#### order
定义项目的排列顺序 , 升序排列 , 默认值为0
#### flex-grow
定义项目的放大比例 , 默认为0 , 即为即使有剩余的空间 , 也不放大
> 这个值定义的是不同项目之间的放大比值
> 比如共有3个项目 , 一个项目的flex-grow为2 , 其余的为1 , 如果有剩余可供放大的空间为400px , 那个flex-grow为2的项目将多占据200px , 其余2个各自多占据100px
#### flex-shrink
定义项目的缩小比例 , 默认为1 , 即空间不足时 , 该项目将被压缩
与flex-grow类似 , 这个属性也是不同项目之间的一个比例
如果定义为0 , 则不会被压缩 , 负值无效
#### flex-basis
定义了在分配多余空间之前 , 项目占据的主轴空间
<length> | auto(默认)
它可以设为像width height类似的值 , 比如100px , 项目将占据固定的主轴空间
#### flex
是flex-grow flex-shrink flex-basis的简写形式
默认 0 1 auto , 后两个值可选
#### align-self
允许单个项目与其他项目在交叉轴上有不同的对齐方式
也就是Flex容器定义的align-items在该项目上不会生效 , 而会被这个项目自身的align-self覆盖
auto(默认) | flex-start | flex-end | center | baseline | stretch
默认值auto表示继承父元素的align-items属性 , 除了auto以外 , 可以取的值与align-items完全一致
