FlexBox学习笔记

FlexBox为弹性盒子布局 (动态伸缩容器)，分为伸缩容器(container)和伸缩项目(item)。
FlexBox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，
当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

【上篇】flex container-Properties for the Parent

1.display

display:flex | inline-flex

块伸缩容器 行内伸缩容器

.container {
display: flex; /* or inline-flex */
}

2.flex-direction（主轴方向）

This establishes the main-axis, thus defining the direction flex items are placed in the flex container
该属性定义了容器的主轴方向，即伸缩项目在容器中的方向。

description：

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

row (default): left to right in ltr; right to left in rtl

row-reverse: right to left in ltr; left to right in rtl

column: same as row but top to bottom

column-reverse: same as row-reverse but bottom to top

3.flex-wrap（伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行）

默认情况下，伸缩容器中的项目会在一行内显示，通过指定该属性来布局
nowrap (default): single-line / left to right in ltr; right to left in rtl

wrap: multi-line / left to right in ltr; right to left in rtl

wrap-reverse: multi-line / right to left in ltr; left to right in rtl

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

4.flex-flow (Applies to: parent flex container element|应用于父容器。)

This is a shorthand flex-direction and flex-wrap properties, which together define the flex container’s
main and cross axes. Default is row nowrap.
该属性是flex-direction和flex-wrap的缩写版本（组合效果），同时定义了伸缩容器的主轴和交叉轴，默认值为水平，不换行

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

5.justify-content（定义伸缩项目在主轴线的对齐方式）

This defines the alignment along the main axis. It helps distribute extra free space left over when
either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
It also exerts some control over the alignment of items when they overflow the line.

该属性定义了伸缩容器中项目在主轴的对齐方式，他会分配所有项目布局之后的额外剩余空间，无论这些项目在一行中不可伸缩，
还是可伸缩但是达到了最大的尺寸。该属性也会影响当所有item超出一行之后的对齐方式。

description：

flex-start (default): items are packed toward the start line

flex-end: items are packed toward to end line

center: items are centered along the line

space-between: items are evenly distributed in the line（在一行内平均分配，每个项目所占空间相同）;
first item is on the start line, last item on the end line

space-around: items are evenly distributed in the line with equal space around them.(间距相同)
Note that visually the spaces aren’t equal, since all the items have equal space on both sides. （看起来间距不同）
The first item will have one unit of space against the container edge, but two units of space between the next item
because that next item has its own spacing that applies.（间距分布为：0.5 A 1 B 1 0.5）

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

6.align-items（定义了items在交叉轴上的布局方式）

This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the
justify-content version for the cross-axis (perpendicular to the main-axis|垂直于主轴).

该属性定义了items在当前行沿交叉轴方向摆放的默认行为，可以将其看做是justfy-content的交叉轴版本

description:

flex-start|交叉轴的起始位置: cross-start margin edge of the items is placed on the cross-start line

flex-end|交叉轴的结束位置: cross-end margin edge of the items is placed on the cross-end line

center|交叉轴中心: items are centered in the cross-axis

baseline|底线对齐: items are aligned such as their baselines align

stretch (default)|铺满交叉轴: stretch to fill the container (still respect min-width/max-width)

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

align-content

This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content
aligns individual items within the main-axis.

当伸缩容器有多行（出现换行后）且在交叉轴上有多余的空间时，该属性定义了各行的对齐方式（水平布局威为例），类似于justy-content
在主轴方向对齐item

Note: this property has no effect when there is only one line of flex items（只有一行的时候不生效）.

description：

flex-start: lines packed to the start of the container

flex-end: lines packed to the end of the container

center: lines packed to the center of the container

space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end

space-around: lines evenly distributed with equal space around each line

stretch (default): lines stretch to take up the remaining space

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

【下篇】flex items-Properties for the Children

order(优先级)

By default, flex items are laid out in the source order. However, the order property controls the order in which
they appear in the flex container.

默认情况下，伸缩项目按照源顺序（自然顺序或书写顺序）排列，order属性可以控制items在容器中排列的顺序（优先级类似）
数值越小，排列越靠前，默认值为0，语法为：order：整数值

.item {
order: ;
}

flex-grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.
It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.
If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to,
at least). Negative numbers are invalid.

该属性定义了一个item在必要时伸展的能力（放大比例），该属性接受一个无单位的数值，可看做为占比。它描述了该item在伸缩容器的可用空间中应该占据的大小。
若每个item的flex-grow值均为1，那么容器的剩余空间将会平分给每个item，如果其中一个item的值为2，那么他在剩余空间占据的大小将会是其他item的两倍。（
至少会尽可能多的）。负数值非法。默认值为0，即表示如果存在剩余空间，也不放大，语法为：flex-grow：整数值
.item {
flex-grow: ; /* default 0 */
}

flex-shrink

This defines the ability for a flex item to shrink if necessary.
伸缩项目的收缩能力，默认值为1 ，其语法为：flex-shrink:整数值（负数值非法）

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

flex-basis

设置伸缩项目的基准值，剩余的空间按比率进行伸缩，其语法为：flex-basis:length | auto，默认值为auto

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.)
or a keyword. The auto keyword means “look at my width or height property” (which was temporarily done by the main-size keyword
until deprecated). The content keyword means “size it based on the item’s content” - this keyword isn’t well supported yet,
so it’s hard to test and harder to know what its brethren(brother) max-content, min-content, and fit-content do.

该属性定义一个元素在剩余空间分配前的默认大小，其值可以为长度(如20%，5rem)，或者一个关键字：
1.auto（默认） 表示根据我的长和宽属性（目前暂时用main-size实现）
2.content 表示根基于item的内容大小分配空间-这个关键字当前支持不好(所以很难去测试也就很难得到其最多内容，最少内容，或者合适的内容大小)。

If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its
flex-grow value.
如果将值设置为0，内容之外的剩余空间将不会考虑在内；若设置为auto，剩余空间的分配将依据其flex-grow属性。

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

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis)
are optional. Default is 0 1 auto.

It is recommended that you use this shorthand property rather than set the individual properties.
The short hand sets the other values intelligently.

该属性是flex-grow, flex-shrink and flex-basis三者的缩写，第二个和第三个参数可选，默认值为0,1,auto
建议使用该属性代替三个独立属性，更智能

.item {
flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
}

align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
该属性会覆盖一个item默认的对齐方式或align-items作用的对齐方式

Please see the align-items explanation to understand the available values.

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

Note that float, clear and vertical-align have no effect on a flex item.

注意：css中的float，clear和vertical-align对flex item不起作用

参考资料：https://css-tricks.com/snippets/css/a-guide-to-flexbox/