flex布局

flex案例：

1、布局属性实例

2、flex骰子

3、flex布局博客讲解

4、flex三栏布局

5、flex完全指南

5、 display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-box;display: flex

    
    
    


自适应导航

    
首页
    
简介
    
公司介绍
    
联系我们


居中对齐布局

    
1
    
2
    
3
    
4
    
5
    
6

三栏布局

    
header
    
内容
    
aside 1
    
aside 2
    
footer

1、flex-direction属性
flex-direction: row | row-reverse | column | column-reverse

    
1
    
2
    
3
    
4
    
5
    
6

2、flex-wrap属性
 flex-wrap: nowrap(默认) | wrap | wrap-reverse

    
1
    
2
    
3
    
4
    
5
    
6

3、flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow:  || ;

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9

4、justify-content属性
justify-content: flex-start | flex-end | center | space-between | space-around; 
justify-content: flex-end

    
1
    
2
    
3
    
4

justify-content: space-between

    
1
    
2
    
3
    
4

justify-content: space-around

    
1
    
2
    
3
    
4

5、align-items属性
 align-items: flex-start | flex-end | center | baseline(项目的第一行文字的基线对齐) | stretch(默认值);
align-items: baseline

    
1
    
2
    
3
    
4

6、align-content属性(属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。)
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11

order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。order:;

    
1
    
2
    
3
    
4

flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

    
1
    
2
    
3
    
4
    
5
    
6

flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

    
1
    
2
    
3
    
4

flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

    
1
    
2
    
3
    
4

flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
 align-self: auto | flex-start | flex-end | center | baseline | stretch;

    
1
    
2
    
3
    
4