Flex布局属性介绍

Flexbox翻译为弹性的盒子

1、是一种可以用于按照行或者列布局的一维布局方法

2、元素可以膨胀以填充额外的空间，收缩以适应更小的空间

3、通常我们使用Flexbox来进行布局的方案，称为flex布局

原来布局存在痛点

比如在父元素中，垂直居中一个块内容。

Flex布局概念

1、div使用display:flex开启了flex布局，该div被称作flex container

2、flex container里边的直接子元素叫做flex item

Flex item特点

1、flex item的布局，将受flex container属性的设置来进行控制和布局

2、flex item不再严格区分块级元素和行内元素。都是flex的元素。

3、flex item默认情况下是包裹内容的，但是可以设置宽度和高度。同样可以拉伸。

inline-flex和flex

flex：flex container以 block-level形式存在，单独占据一行。

inline-flex：flex container以inner-level形式存在，不再单独占据一行。

Flex模型

1、主轴【默认是从左到右的箭头、还有从右到左的箭头、还有从上到下的箭头、还有从下到上的箭头。main axis】

2、交叉轴【对应的就是x、y轴类似】

主轴的宽度不够了，开始按照一行一行的顺序排列了，像是写字一样。这时，就用到了交叉轴的概念。

Flex Container属性

flex-flow：简写属性。可以设置flex-direction和flex-wrap。

flex-direction：决定主轴的方向【row column row-reverse column-reverse 】

flex-wrap：包裹，宽度放不下的时候，默认会压缩。【默认值是nowrap：显示单行；wrap：显示多行；wrap-reverse：多行】

justify-content：设置对齐【flex-start：左对齐。flex-end：右对齐；left、center、right、

                space-between：先从两端开始放置，然后再放置中间。间距等分。

                space-evenly：将左右两边上的空间也等分

                space-around：中间等分，两边等分为中间的一半。】

align-items：决定了子元素在交叉轴上的对齐方式。【flex-start、flex-end、center、stretch(拉伸到容器，但是height必须是auto)、baseline(与基准线-fontSize对齐)】

align-content：决定多行的情况下，对交叉轴的对应方式。==justify-content【不怎么用】

Flex item属性

flex-grow：0，默认就算有多余空间，也不给。如何设置了1，该item就可以获取所有的剩余空间。给item做拉伸，但是不能超过限制的值。max-width.

flex-shrink：缩小，压缩。默认值1，空间不够了，进行压缩。如果给单独的item设置了1，就压缩该单个item。

flex-basis：设置item在主轴上的基础数值。如果是120px，那么aaa_bbb_ccc_dd像是一个单词，显示不开的话，会拓展宽度，让其显示开。max-width

order：flex item元素，显示的顺序

align-self：不和container的align-item一样，自己单独设置。

flex：缩写属性。【flex-grow,flex-shrink,flex-basis】

container问题

justify-content：space-between

如果遇到中间空白，那么加上<span>元素。.container > span 设置的宽度与flex的item宽度一样即可。个数为列数-2。