Flex——弹性布局

今天在做项目时,要一个500*100的页面区域做三个橱窗,尼玛可是恶心死我了!光是计算左右内外边距,左右宽度,就废了一上午时间~~好吧,我承认我的数学老师挂得早!

正在苦逼的列公式,定位图片,浮动文字时,忽然一妹子飘然而至,看到我满纸的加减乘除,立刻投来鄙视的目光,悻悻然道:为何不用弹性布局??!

此刻,一万匹*在心中奔腾,当即拿脑袋砸烂了键盘!尼玛!洒家咋把这东西给忘了呢???!!

于是重新复习了弹性布局,并在此做个总结笔记,以鉴世人!

首先,啥是弹性布局?我理解的是,就是可让网页中的任意元素,附有弹性,能长能缩,以适应页面排版,更能使网页兼容不同分辨率的屏幕。

看例子:

Flex——弹性布局

这是两个div,默认是不能显示在一行的,但现在我想让div2移动到右端,怎么做?

最简单的办法是加浮动,d1左浮,d2右浮:

Flex——弹性布局

或者,在d1,d2共同的父元素上,加一个display:inline-block;再调整div2靠右浮动,但这都会带来问题,因为只要是浮动,往往会影响页面中的其他元素,比如:浮动元素会影响其父元素高度,以及上外边距溢出溢出的问题,有兴趣的可以看我下一篇关于网页元素浮动的文章,在这里就不解释啦。

不过这些都是还不能算是真正的问题,毕竟都是可以解决的,但这带来的真正问题是复杂的麻烦,问题有时候会很容易解决,但是麻烦解决起来,常常会带来更大的麻烦。

比如,我现在再加一个元素:

Flex——弹性布局

我现在想让d1、d2、d3等间隔显示排列在背景条中,怎么办?拿尺子去量?去算?

好吧,这还是三个,可要是30个呢,300个呢,还这么干?

程序员就是怎么猝死的!!

而有了弹性布局,秒秒钟搞定!

Flex——弹性布局

看到没?就两行代码!

Flex——弹性布局

display:flex;是将3个div的父元素设置为弹性容器,

justify-content:space-between,就是让子元素div两端对齐,每两个项目之间的间隔相等。

现在呢,我不想等距划分了,因为div2比较帅,所以想让它多占一点空间,成为这个样子:

Flex——弹性布局

咋办?要用,总宽 - d1(宽) - d3(宽) = d2(宽)?!

呵呵,遇见淘宝那样的页面,你就等着猝死吧!

在这里,还是要用到弹性布局!

只需要在d2里加上一个flex的属性罢了!

看代码:

Flex——弹性布局

还是刚才的东西,其他都没动,更没算,只添加了一个flex-grow:1;的样式,搞定!

当然,flex还有其他十几个属性,不过都不常用,用法也都类似,在这里就不一一列举了,感兴趣的可以去查手册,反正我是懒~~

上一篇:第十九天 标准目录与time 模块


下一篇:矩阵快速幂——POJ3070