flex全属性

flex这个东西项目中用的不少，使了好几年了也，不知道有没有人想我一样，就记得大概属性名，值完全靠补全的，记不住用哪个就直接上chrome点开调试工具挨个看；或者直接开着阮一峰的flex布局博文参照着用。虽然阮一峰老师写的确实简明清晰，但是求人不如求己，今天索性吧所有的flex属性整理一下，自己敲个demo加强下记忆。

什么是Flex布局

flex布局（2012）前身不知道是不是box布局（2009）；从布局的方式上来看基本上是一致的。传统的布局方式依赖于float\position\margin;flex布局则可以指定任意元素为弹性盒，然后通过管理内部项的排列来实现自动布局；

图式展示了flex布局的主要概念名称指代，我个人是觉得没啥大用，有没有也看得懂文档。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

全属性一览

作用于容器

作用于容器的属性一共6个

属性	值	作用
flex-direction	row（默认值）: 从左到右 row-reverse: 从右到左 column: 从上到下 column-reverse：从下到上	决定主轴的方向，即子项目flex item的排列方向
flex-wrap	nowrap （默认值）：不换行 wrap: 换行 wrap-reverse: 换行，第一行在下方，颠倒下顺序	默认情况下，项目都排在一条线（又称"轴线"）上。 flex-wrap属性定义，如果一条轴线排不下，如何换行
flex-flow		flex-direction、flex-wrap的简写方式
justify-content	flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between（空格在中间）：两端对齐，项目之间的间隔都相等。 space-around（空格环绕）：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。	定义了子项目flex item在主轴上的对齐方式。
align-items	flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 center：交叉轴的中点对齐 baseline: 项目的第一行文字的基线对齐 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。	定义子项目flex item在交叉轴上的对齐方式。
align-content	flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。	属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。多根轴线出现的场景是，flex item 很多，折成多行。即多轴

作用于项目

作用于项目上的属性一共6个。

属性	值	作用
order	number 默认值是 0。规定灵活项目的顺序。	设置或检索弹性盒模型对象的子元素出现的順序。
flex-grow	number 默认值是 0,规定项目将相对于其他灵活的项目进行扩展的量。	用于设置或检索弹性盒子的扩展比率
flex-shrink	number 默认值是 1,规定项目将相对于其他灵活的项目进行收缩的量	指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis	number 一个长度单位或者一个百分比，规定灵活项目的初始长度。 auto 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。	用于设置或检索弹性盒伸缩基准值
flex		flex-grow、flex-shrink 和 flex-basis 属性的简写属性
align-self	auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。 stretch 元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。 center元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 flex-start元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 flex-end元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 baseline元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。	定义flex子项单独在侧轴（纵轴）方向上的对齐方式

实例

原版就是一个ul>li*3

作用于容器

1.flex-direction [dəˈrekʃn]

2.flex-wrap

3.flex-flow

就是个简写属性，和background之于background-color没两样，没啥可说的；

	flex-flow: <flex-direction> | <flex-wrap>;

4. justify-content [ˈdʒʌstɪfaɪ]

这里说一下space-evenly；在chrome中才发现有这个值，大致就是平均分配所以项中间的间隔，简单查阅了一下，存在兼容问题，如有需求尽量使用around前后添加伪元素实现。

5.align-items

6.align-content

作用于项

1.order

number 默认值是 0。规定灵活项目的顺序。

2.flex-grow

number 默认值是 0,规定项目将相对于其他灵活的项目进行扩展的量。 用于设置或检索弹性盒子的扩展比率
li w=50 ul w=300

3.flex-shrink

number 默认值是 1,规定项目将相对于其他灵活的项目进行收缩的量 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
li w=100 ul w=200

4.flex-basis

number 一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。 用于设置或检索弹性盒伸缩基准值
li w=50 ul w=300

5.flex

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

	flex: <'flex-grow'><'flex-shrink'><'flex-basis'> 

6.align-self

单独设置某个项目对齐方式，效果与align-item一致；
ul align-items:center;li align-self:flex-start;