前言

对于Flex布局，在之前我用的最多的无非是justify-content:center和align-items:center这两个属性，对其他的属性知之甚少，最近也看了不少关于Flex布局的博文，自己整理之后，决定写下这篇博客，以便之后学习。

Flex布局教程

前言
Flex布局是什么
- 1. 容器属性
- - 1.1 flex-direction属性
  - 1.2 flex-wrap属性
  - 1.3 flex-flow属性
  - 1.4 justify-content属性
  - 1.5 align-items属性
  - 1.6 align-content属性
- 2. 项目属性

Flex布局是什么

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定Flex布局：

.cloud-box {display: flex;
}

也可以将行内元素作为一个容器：

.cloud-box {display: inline-flex;
}

修改父元素display:flex，div自动就排列成了一行，没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float。

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

Flex属性主要由容器属性和项目属性构成，下面会分别讲到这两个属性。

1. 容器属性

1.1 flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse

row(默认): 主轴为水平方向，起点在左端

row-reverse: 主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

1.2 flex-wrap属性

取值：nowrap(默认) | wrap | wrap-reverse

nowrap（默认）：不换行
举个栗子：box容器的宽度为150px，容器中有5个宽度为50px的项目，nowrap的情况下，项目会强制等分，不换行，因此，每个项目的宽度就会变为30px，而非之前的50px。

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方
需要注意的是第一排会紧贴容器底部，而不是我们想象的项目4、5紧贴容器顶部，效果与wrap相反。

1.3 flex-flow属性

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

1.4 justify-content属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly

flex-start: 左对齐

flex-end: 右对齐

center: 居中

space-between: 两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。

)
space-around: 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

1.5 align-items属性

取值：stretch(默认) | flex-start | flex-end | center | baseline

stretch: 如果项目未设置高度或者设为 auto，将占满整个容器的高度。

flex-start: 交叉轴的起点对齐，会让项目在纵轴紧贴容器顶部

flex-end: 交叉轴的终点对齐，会让项目在纵轴紧贴容器底部

center: 交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

1.6 align-content属性

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用
flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。
flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候你就需要去设置多条轴线之间的对齐方式了。

取值：stretch(默认) | flex-start | flex-end | center | space-between | space-around | space-evenly

stretch: 在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

flex-start ，center，flex-end 与align-items属性表现一致

space-around: 每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍
space-between: 轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙
space-evenly: 项目之间间距与项目到容器之间间距相等

2. 项目属性

Flex布局教程（二）

Flex布局教程（一）相关推荐

Flex 布局教程：实例篇
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...
Flex 布局教程实例
Flex 布局教程实例一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 F ...
Flex 布局教程：语法篇
阮一峰的网络日志 » 首页 » 档案上一篇:ES6 的功能侦测库下一篇:Flex 布局教程:实分类: 开发者手册 Flex 布局教程:语法篇作者: 阮一峰日期: 2015年7月10日网页布 ...
Flex 布局教程：语法篇（阮一峰）
阿里云 > 教程中心 > html教程 > Flex 布局教程:语法篇(阮一峰) Flex 布局教程:语法篇(阮一峰) 发布时间:2018-03-12 来源:网络上传 ...
css基础精华---Flex 布局教程：实例篇
转载地址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html http://www.ruanyifeng.com/blog/2015/0 ...
Flex布局教程（非常受用）
目录前言: 一.语法篇 1.概述 2.Flex 布局怎么用任何一个容器都可以指定为 Flex 布局行内元素也可以使用 Flex 布局: Webkit 内核的浏览器,必须加上-webkit前缀: ...
css 快速入门之 flex 布局教程
css 快速入门之 flex 布局教程 flex 简称弹性布局,是2009年W3C提出的 css3 新属性. 弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器 ...
HTML Flex布局教程
Flex 布局教程:语法篇 bShare.addEntry({ title: document.getElementById("page-title").innerHTML, ur ...
Flex 布局教程——阮老师
超级实用的css布局???赶紧学习来一.Flex 布局教程:语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 二.Flex 布 ...

Flex布局教程（一）

前言