关于css:关于css3弹性伸缩盒

用处

• 弹性盒子对于前端 web 网页布局来说，有着无足轻重的作用，挪动端也是如此。把握了弹性盒子用法，对于目前编写自适应页面很重要。把握这种布局规定，是一项必备技能。

弹性伸缩盒模型阐明

• 主轴（main axis） 是沿着 flex 元素搁置的方向延长的轴（比方页面上的横向的行、纵向的列）。该轴的开始和完结被称为 main start 和 main end**。
• 穿插轴（cross axis） 是垂直于 flex 元素搁置方向的轴。该轴的开始和完结被称为 cross start 和 cross end**。
• 设置了 display: flex 的父元素（在本例中是 <section>）被称之为 *flex 容器（flex container）。
• 在 flex 容器中体现为柔性的盒子的元素被称之为 flex 项 （flex item）

罕用的属性

1.flex-direction（指定弹性容器中子元素排列形式）

 属性：row 默认值。元素将程度显示，正如一个行一样。row-reverse 以相同的程序。column 元素将垂直显示，正如一个列一样。column-reverse 与 column 雷同，然而以相同的程序。

2.flex-wrap（属性规定 flex 容器是单行或者多行，同时横轴的方向决定了新行重叠的方向。）
` nowrap 默认值。规定元素不拆行或不拆列。
wrap 规定元素在必要的时候拆行或拆列。
wrap-reverse 规定元素在必要的时候拆行或拆列，然而以相同的顺 序。`

3.align-items 属性定义 flex 子项在 flex 容器的以后行纵轴方向上的对齐形式，就是规定高低排行的款式。

stretch 默认值。我的项目被拉伸以适应容器。
center 我的项目位于容器的核心。
flex-start 我的项目位于容器的结尾。
flex-end 我的项目位于容器的结尾。

baseline 我的项目位于容器的基线上。

4.justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐形式。
flex-start 我的项目位于容器的结尾。
flex-end 我的项目位于容器的结尾。
center 我的项目位于容器的核心。
space-between 我的项目位于各行之间留有空白的容器内。

space-around 我的项目位于各行之前、之间、之后都留有空白的容器内。

弹性子元素属性

1.order 属性

.flex-container .flex-item {order: <integer>;}

<integer>：用整数值来定义排列程序，数值小的排在后面。能够为负值，默认为 0。
2.align-self 设置或检索弹性盒子元素本身在侧轴（纵轴）方向上的对齐形式。(跟那个 align-items 相似)