发表于: 2017-03-11 23:57:33

2 664


听了师兄的话去鼓捣了一下flex..觉得如果能熟悉的话应该很不错


今天学习的内容:


1.深入了解flex的属性!

传送门1:语法:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

传送门2:实用:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

个人理解flex的概念就是:

先设置一个容器,再把一些小项目放入其中。

这个容器由主轴和交叉轴构成。我们可以设置主轴的方向flex-direction,

以及项目item在主轴或者交叉轴上的对齐方式justify-content/align-item

对于项目,我们可以设置它在容器中的排列顺序 给每个项目一个order

还可以设置 让它根据空间调节放大或者缩小的比例flex-grow/flex-shrink


然后今天看实用篇 还尝试了一下圣杯布局 即页面分为上中下三部分 中间部分又由导航 主栏 副栏组成的布局。


2.知道了@media screen and(min-width:???px){}

     @media screen and(max-width:???px){}的意义。。


大意就是根据不同屏幕的大小设置不同的背景 已达到自适应的目的吧



明天计划:试试用flex完成九宫格布局






现在的学习速度真是龟速哇..(打个很水很极限的卡。。周末愉快^ ^)





返回列表 返回列表
评论

    分享到