一切能用css解决的问题都不要用js;
一直以来对css的关注就比较少,一篇写得很经典的flexbox的文章:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
总结:
在flexbox出现以前,我们的布局只能采用position+display+float属性来进行布局,下图列举了一些常见的布局:
前段时间总结了如何进行2列布局的方法:
css的两列布局
但是没有写如何利用flexbox进行两列布局
关于flexbox
flexbox的使用其实很简单,外面一个盒子,里面放一些小盒子。
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
父容器
.box{
display: flex;
}
父容器的属性:
- flex-direction:决定主轴的方向
- flex-wrap:决定换行方式
- flex-flow:direction和wrap的合称
- justify-content:主轴对齐方式
- align-items:交叉轴对齐方式
- align_content:多根轴线的对齐方式
1.flex-direction:决定主轴的方向
属性值:row|row-reverse|column|column-reverse
row
row-reverse
column
column-reverse就是逆转了
2.wrap:决定换行的方式
属性值:nowrap(默认)|wrap||wrap-reverse, 即不换行(默认)|换行|逆向换行;
第一种情况是默认的情况:5个盒子,即使你设置的宽度,如果宽度总和大于container,那么他们的宽度就会被压缩了
wrap-reverse:
这种情况就是颠倒过来的排列了
3.flex-flow:direction和wrap的合称
就不解释了,就是两个属性的合并
flex-flow:row nowrap (默认)
4. justify-content:主轴对齐方式
我觉得这个属性很有用,当前前提是在外部盒子有空余空间的时候,怎么利用剩余空间,如果里面的盒子把外部盒子都占满了,怎么布置都没有用啊;
flex-start:
flex-end:
center:
space-between
space-around
这样也是有效的哦——
设置了wrap 和justify-content:center
5.align-items属性
前面那个是横轴的对齐方式,这个就是设置纵轴的对齐方式了,不过我觉得flexbox这里取名方式就有点奇怪啊,啊,先不管,先看看它的属性值吧。
跟justify-content有点像吧
align-items: flex-start | flex-end | center | baseline | stretch;
项目属性
有 order|flex-grow|flex-shrink|flex-basis|flex|align-self
order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
flex-grow
定义了元素是否放大,属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink
定义了元素是否收缩,属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis|
basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
flex 实现圣杯布局
flex实现圣杯布局主要依赖于flex的三个属性:
flex-grow,flex-shrink, flex-basis
- 需要固定宽度的盒子设置flex-grow 为0;flex-shrink 为0;即不收缩不扩展,basis设置为需要的大小;
不需要固定的盒子设置flex为1 :即有剩余空间就放大
代码
<div class="container1">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
.container1 {
display: flex;
display: -webkit-flex;
flex-flow: row;
align-items: baseline;
height: 100px;
width: 200px;
border: 1px solid blue;
}
.box1 {
flex: 0 0 50px;设置flex布局,不伸缩
height: 50px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #333;
}
.box2 {
flex: 0 0 50px; //设置flex布局,不伸缩
height: 50px;
padding: 10px;
order: 1;
box-sizing: border-box;
border: 1px solid #333;
}
.box3 {
width: 50px;
height: 50px;
padding: 10px;
flex: 1;//可伸缩
box-sizing: border-box;
border: 1px solid #333;
}
这里解释一下box-sizing这个属性:
因为ie和chrome的盒模型不一样
webkit的宽度是 width=width(css定义的)+padding+border;
ie的宽度 width(定义的)
这里设置border-box,即按照ie的盒模型解释:
css设置的宽需要减去padding/2+border/2
如果不设置按照webkit的解释:
就是css设置的宽就是元素的宽,padding和border是不算在里面的;