弹性布局

[GRPdream]

基本概念图

由图可见，弹性布局将 div 分为了两条轴-主轴(main axis)和交叉轴(cross axis)，整个布局围绕着这两根轴线进行

容器属性及作用

flex-content属性

1.flex-direction

用以确定 items 在主轴上的排列方法

值	描述
row	主轴为水平方向，项目沿主轴从左至右排列
column	主轴为竖直方向，项目沿主轴从上至下排列
row-reverse	主轴水平，项目从右至左排列，与row反向
column-reverse	主轴竖直，项目从下至上排列，与column反向

Ps: 改变主轴(column)加上 space-between 能实现 DIV 中有一部分始终在上，一部分始终在下的效果

row

row-reverse

column

2.flex-wrap

用以处理 items 大于大于主轴长度时的情况

值	描述
nowrap	自动缩小项目，不换行
wrap	换行，且第一行在上方
wrap-reverse	换行，第一行在下面

wrap

wrap-reverse

3.flex-flow

是flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行。

4.justify-content

用于确定 items 在 主轴上的对齐方式

值	描述
flex-start	左对齐
flex-end	右对齐
center	右对齐
space- between	两端对齐
space-around	在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
space-evenly	flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距,，主轴结束位置到最后一个flex项的间距，都完全一样.

center

space- between

space-around,中间的间距分别为33，67，67，33

space-evenly，中间的间距分别为50，50，50，50

5.align-items

决定 items 在交叉轴上的对齐方式

值	描述
flex-start	顶端对齐
flex-end	底部对齐
center	竖直方向上居中对齐
baseline	item第一行文字的底部对齐
stretch	当item未设置高度时，item将和容器等高对齐

center

stretch

6.align-content

规定当不只有一根主轴，即 items 不止一行时，多行在交叉轴上的对齐方式（Ps: 设置了这个后，align-items 属性将失效）

值	描述
flex-start	左对齐
flex-end	右对齐
center	居中对齐
space- between	两端对齐
space-around	沿轴线均匀分布
stretch	各行将根据其flex-grow值伸展以充分占据剩余空间

center

space-around

space- between

flex-item属性

1.order

order的值是整数，默认为0，整数越小，item排列越靠前

2.flex-grow

定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例

3.flex-shrink

定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例

4.flex-basis

表示项目在主轴上占据的空间，默认值为auto。如下代码

<div class="wrap">
    <div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
    <div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
    <div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
</div>

5.flex

flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。

6.align-self

值	描述
auto	和父元素align-self的值一致
flex-start	顶端对齐
flex-end	底部对齐
center	竖直方向上居中对齐
baseline	item第一行文字的底部对齐
stretch	当item未设置高度时，item将和容器等高对齐

flex-end|

参考文章