Flex使用总结

最近做的项目因为对浏览器的兼容要求是IE10以上，所以大胆的使用了Flex布局，这里总结一些使用心得仅供参考。

一，Flex简单介绍

Flex是Flexible Box的缩写，意为”弹性布局”。任何一个容器都可以指定为Flex布局。当元素设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员，称为Flex项目（flex item）。

二，用法及效果

Flex容器的属性有：

• flex-direction设置项目的排列方向
• flex-wrap 一行排不下的时候如何换行
• flex-flow flex-direction属性和flex-wrap属性的简写形式
• justify-content 子元素的横向对齐方式
• align-items 子元素垂直对齐方式
• align-content 子元素多根轴线的对齐方式

Flex项目的属性有：

• order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis 定义了在分配多余空间之前，项目占据的主轴空间，默认为auto
• flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，主要使用了这个属性。
• align-self 允许单个项目有与其他项目不一样的对齐方式

三，实例
1,全页面布局，要求：

html

<div class="header"></div>
 <div class="content">
        <div class="leftside"></div>
        <div class="rightside"></div>
 </div>

css:

.content{display:flex;}
 .leftside{max-width:20%;}
 .rightside{flex:;}

2，复杂结构的行列表，要求：

一行的html:

<div class="line">
     <div class="title"> 内部结构...  </div>
     <div class="info"> 内部结构...  </div>
     <div class="btns"> 内部结构... </div>
 </div>

css:

.line{display:flex;align-items: center;justify-content: space-between;} //两端对齐，垂直居中
.title{flex:;} //在总宽度中分配的比例
.info,.btns{flex:;}

四，总结

用顺手了之后在各种结构中都想flex一下，但是注意，如果你的元素后续需要js操作显示隐藏，切换display:block,display:none功能的时候就不能使用flex了。