Flex弹性布局

开发工具与关键技术：DW和Flex弹性布局

撰写时间：2019年1月16日

Flex弹性布局

1. 弹性布局顾名思义就是把页面的布局编布得更好，使页面比传统的布局更加灵活。

传统的布局依赖display 属性 +position属性 +float属性来完成CSS页面布局，但这种方式不利于优化代码，使用的代码也会造成后面代码的连通反应，于是2009年，W3C提出了Felx弹性布局

 

 

1. Flex的使用
2.              

    

在页面宽度没有变化时，如下反应：

 

当页面发生变化时，页面如下反应：

以上就是弹性布局加Felx和不加Felx的效果，加了Felx能使页面更加的具有弹性和使页面具有美观，代码也更加的简洁。不加Felx当页面变小是布局也在变化

 

Felx还有6个属性设置在容器上：（引用上课时的定义）

1、flex-direction 属性决定主轴的方向（即项目的排列方向）

2、flex-wrap  属性决定超出换行

3、flex-flow

4、justify-content  属性决定在主轴的对齐方向

5、align-items  属性决定在交叉轴的对齐方向

6、align-content属性决定多根轴线的对齐方式

 

 

Felx还有6个属性设置在项目上：

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

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

 

    3、flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

    4、flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

    5、flex

    6、align-self 属性允许单个项目有与其他项目不一样的对齐方式

 

总结：所以我们在用flex弹性布局时一定要注意合理运用弹性布局的属性，使页面发挥最好的效果，使页面更加的整洁和美观