之前一直针对于PC端开发，自适应方面接触甚少，一般来说用些的 css 方法就直接解决一些设计问题，直到目前现状开始转变为纯移动端开发，于是乎开始慢慢接触移动端的新特性的实战，今天主要做一下 flexbox 的笔记。
Flexbox 布局模块提供了我们一个在未知或者动态容器中自适应出我们所希望的布局形式。垂直居中，重新排序，布局动态的伸展以及收缩等。目前在移动端大体来说兼容性还不错 can I use(Flex)。
Flexbox 实质来说并不能仅仅作为一种属性，而是作为一类模块，包括作为父元素的伸缩容器以及子元素的伸缩元素。伸缩元素会依据伸缩容器具体变化，类似于在一些情况下我们盒大小使用百分比情况类似，不过使用百分比总会有那么一些时候需要我们使用不太规范的方式来处理某些特定的情况情况。
前提是容器的宽高已定：
对于上面很常见的布局逻辑，一般来说会简单的使用下面形式的 html
-
<div class="container">
-
<div class="item"></div>
-
<div class="item"></div>
-
<div class="item"></div>
-
</div>
配合以下的 css
-
.container{
-
width: 300px;
-
height: 100px;
-
margin: 50px;
-
}
-
.item{
-
float: left;
-
width: 33.33%;
-
height: 100%;
-
}
-
.item:nth-child(1){
-
background-color: #333;
-
}
-
.item:nth-child(2){
-
background-color: #666;
-
}
-
.item:nth-child(3){
-
background-color: #999;
-
}
但是 我们更多的是会遇到这种形式
那么 好吧 借助于一些通用的 css3 的伪类选择器 还是可以写的稍微好看一点，不过 html 也需要稍微恶心的包上一层，当然也有好多简单的 hack写法
-
<div class="container1">
-
<div class="item1">
-
<div class="innerItem1"></div>
-
</div>
-
<div class="item1">
-
<div class="innerItem1"></div>
-
</div>
-
<div class="item1">
-
<div class="innerItem1"></div>
-
</div>
-
</div>
css 如下
-
.container1{
-
width: 300px;
-
height: 100px;
-
margin: 50px;
-
border: 1px solid #000;
-
}
-
.item1{
-
float: left;
-
width: 33.33%;
-
height: 100%;
-
}
-
.innerItem1{
-
height: 90px;
-
margin: 5px 5px 5px 0;
-
background-color: #CCC;
-
}
-
.item1:nth-child(1) .innerItem1{
-
margin-left: 5px;
-
}
好的，flexbox 闪亮登场 如何使用例1中的 html 结构 优美的写出例2的布局呢？
-
<div class="container">
-
<div class="item"></div>
-
<div class="item"></div>
-
<div class="item"></div>
-
</div>
首先，对于 flexbox 我们需要创建一个 flex 容器，设置其 display 属性
-
.container{
-
width: 300px;
-
height: 100px;
-
margin: 50px;
-
border: 1px solid #000;
-
-
display:-webkit-flex;
-
display:-ms-flexbox;
-
display:flex;
-
}
在对其子元素设置 flex：
-
.item{
-
flex:1;
-
background-color: #999;
-
margin: 5px 5px 5px 0;
-
}
-
-
.item:nth-child(1){
-
margin-left: 5px;
-
}
使得我们既不需要多放置一层div，也无需来处理写死内部伸缩元素的高度，最主要的却是内部元素的宽高已经完全依赖自适应于容器元素。将容器元素宽高随意配置均可使其子元素得到自适应（之前多嵌套一层的 高度上依旧不是很好处理）。
然后，处理高度的来了，先来个垂直居中吧。
好吧，一般形式的已经不想写了，直接看下 flexbox 的形式
-
<div class="container-h">
-
<div class="item-h"></div>
-
</div>
-
.container-h{
-
height: 300px;
-
width: 100px;
-
margin: 50px;
-
border: 1px solid #000;
-
-
display:-webkit-flex;
-
display:-ms-flexbox;
-
display:flex;
-
-
/*垂直居中*/
-
-webkit-align-items: center;
-
align-items: center;
-
}
-
-
.item-h{
-
flex:1;
-
height:100px;
-
background-color: #999;
-
margin: 5px;
-
}
终于写个垂直居中，我可以不用量 line-height，不用设置margin，也不用去攀比各种css的奇思妙想了。突然感觉世界的起跑线都一样了。
好了，先来熟悉下了解 felxbox 之前的一些简单概念：
伸缩容器：一个设置了 display 为 flex 或者 inline-flex 的外层元素
伸缩元素：在伸缩容器中的子元素
主轴：延伸缩容器配置伸缩元素的方向
侧轴：主轴的垂直线
各个属性简单介绍：
flex-direction : row | row-reverse | column | column-reverse;
在伸缩容器上定义用来定义主轴方向。
row：为默认方向，排版方向
row-reverse：与 row 反方向
column：从上到下排版
column-reverse：与 column 排版方向相反
flex-wrap : nowrap | wrap | wrap-reverse;
在伸缩容器上用来定义容器内伸缩元素是单行还是多行显示。（各个伸缩元素设置最小高宽，在每个元素最小宽度下伸缩容器无法一行内放置的时候所做的处理）
nowrap：默认值，伸缩容器为单行显示，当容器太小时，内部元素会跑出
wrap：内部元素会多行显示，伸缩容器一行内放置不下的元素会被放置到下一行（与排版方向有关）
wrap-reverse ：内部元素会多行显示，伸缩容器一行内放置不下的元素会被往上位置放置
flex-flow : || 为上面两种属性的缩写版。
justify-content ： flex-start | flex-end | center | space-between | space-around;
为可伸缩模型的重头戏，也是真正优雅实现各种居中的css3属性。
flex-start：伸缩元素向起始位置靠齐
flex-end：伸缩元素向结束位置靠齐
center：伸缩元素居中
space-between：均匀分布，第一个向起始位置靠齐，最后一个向结束位置靠齐
space-around：伸缩元素平均分布在行里，首尾保留一半空间
align-items：flex-start | flex-end | center | baseline | stretch;
用来定义伸缩容器内部的伸缩项目在侧轴上的对齐方式
flex-start：伸缩元素向侧轴起始位子靠拢
flex-end：伸缩元素向侧轴结束位子靠拢
center: 伸缩元素居中对齐
baseline ：侧轴方向根据基线对齐
stretch : 为默认值，会更具伸缩的状态尽可能填充伸缩容器。
还有部分属性就不一一分析了：
order：<int>
标示伸缩项目在容器中的排序先后。
flex : none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
flex-grow : <number>
伸缩元素的无单位的伸缩比例
flex-shrink : <number>
根据弹性盒子元素所设置的收缩因子来作比例收缩空间。
flex-basis : <length>
根据弹性盒子元素所设置的收缩因子来作比例收缩剩余的空间。
阅读(4158) | 评论(0) | 转发(1) |
