http://www.cnblogs.com/nuannuan7362/
源自于此文章,归纳总结为自己的东西。
一、flex-direction
主轴方向,水平还是竖直
row | 主轴为水平方向,项目沿主轴从左至右排列 |
| |||
column | 主轴为竖直方向,项目沿主轴从上至下排列 |
|
注:
row-reverse:主轴水平,项目从右至左排列,与row相反;
column-reverse:主轴垂直,项目从下至上排雷,与column相反。
二、flex-wrap
默认情况,item在一条直线,flex-wrap决定item是否换行
nowrap | 自动缩小项目,不换行 |
| |||||
wrap | 换行,且第一行在上方 |
| |||||
wrap-reverse |
换行,第一行在下面 |
|
三、flex-flow
是flex-direction和flex-wrap的简写形式,如:row wrap|column wrap-reverse等。默认值为row nowrap,即横向排列 不换行。
四、justify-content
决定item在主轴上面的对齐方式
flex-star | 左对齐 |
| |||
flex-end | 右对齐 |
| |||
center | 居中对齐 |
| |||
space-around | 沿轴线均匀分布 |
| |||
spac-between | 两端对齐 |
五、align-item
决定item在交叉轴(水平轴和竖直轴)上的对齐方式
flex-star | 顶端对齐 | |
flex-end | 底端对齐 | |
center | 竖直方向上居中对齐 | |
baseline | item第一行文字的底部对齐 | |
stretch | 当item未设置高度时,item将和容器登高对齐 |
六、align-content
定义了多根主轴时,即item不止一个时,多行在交叉轴轴上的对齐方式
Ps:定义了align-content,align-items会失效
flex-star | 右对齐 | |
flex-end | 左对齐 | |
center | 居中对齐 | |
space-between | 两端对齐 | |
space-around | 沿轴线均匀分布 | |
stretch | 各行将根据其flex-grow值伸展以充分占据剩余空间 |
flex item 属性详解
1、order
数值,默认为0,数值越小,item排列越靠前
<div class="wrap">
<div class="div" style="order:4"><h2>item 1</h2></div>
<div class="div" style="order:2"><h2>item 2</h2></div>
<div class="div" style="order:3"><h2>item 3</h2></div>
<div class="div" style="order:1"><h2>item 4</h2></div>
</div>
item1 |
item2 |
item3 |
item4 |
2、flex-grow
定义了当flex容器有多余空间时,item是否放大。默认为0,即有空余空间也不放大;也可以是整数,表示item的放大比例
<div class="wrap">
<div class="div" style="flex-grow:1"><h2>item 1</h2></div>
<div class="div" style="flex-grow:2"><h2>item 2</h2></div>
<div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>
表示为item1:iitem2:item3 = 1:2:3
3、flex-shrink
等比缩小,默认为0,可以自行设置缩小比列
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>
1:2:3
item1 | item2 | item3 |
5、flex
flex是grow、shrink、basis的总写
6、align-self
align-self属性允许某一个item有自己独特的在交叉轴上的对齐方式,它有六个可能的值。默认值为auto
auto:和父元素align-self的值一致
flex-start:顶端对齐
flex-end:底部对齐
center:竖直方向上居中对齐
baseline:item第一行文字的底部对齐
stretch:当item未设置高度时,item将和容器等高对齐