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:1;}

 

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:3;} //在总宽度中分配的比例
.info,.btns{flex:1;}

四，总结

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