flex弹性布局笔记

弹性盒子: 由弹性容器(Flex container) 和 弹性子元素(Flex item) 组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意：弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

Flex父元素

*1.flex-direction属性，指定了弹性子元素在父容器中的排列顺序。【补充：direction属性，rtl右到左 | ltr左到右，设置文本方向】
row(由左往右) | row-reverse | column | column-reverse(由下往上)

*2.主轴(横轴)justify-content属性
flex-start(默认值)子元素左对齐、
flex-end右对齐、
center居中、
space-between两端对齐，项目之间的间隔都相等。
space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

*3.侧轴(纵轴)align-items属性，同时设置所有子元素在侧轴（纵轴）方向上的对齐方式。
flex-start子元素顶部向下、flex-end、center、baseline、stretch(默认值，当子元素未指定height或仅指定了min-height，才会自动纵向拉伸。不然无效)

*4.flex-wrap属性，指定子元素 换行方式。nowrap(默认)|wrap|wrap-reverse */

*5.align-content属性，在flex-wrap 属性的基础上，设置各个行的对齐方式(调整行间距)。
flex-start | flex-end | center | space-between | space-around | stretch(默认值，当子元素未指定height或仅指定了min-height，才会自动纵向拉伸。不然无效)

Flex子元素

*1.order属性，整数值(可为负数)，定义兄弟元素的排列顺序，数值小的排在前面。

*2.margin属性，自动获取弹性容器中 当前元素周围的 剩余空间。[值为auto时，该子代元素中的 内容 会在 其内部 水平垂直居中。]

*3.align-self属性，与父元素的align-items属性功能一样！设置当前元素自身在侧轴（纵轴）方向上的对齐方式。 auto(将会自动继承父元素的align-items属性值) | flex-start | flex-end | center | baseline | stretch(未指定height或仅指定了min-height，才会自动纵向拉伸。)

*4.flex属性，【是flex-grow,flex-shrink,flex-basis项目属性的缩写，默认值0,1,auto】
指定弹性子元素如何分配空间(根据各个display:flex兄弟元素的flex值，按比例分配空间)[若只有一个display:flex子代，其flex值为auto或1，都将自动获取剩余空间]