flex学习小结

接触到flex一个多月了，今天做一个学习小结。如果有知识错误或者意见不同的地方。欢迎交流指教。

 

画外音：先说一下，我是怎么接触到flex布局的。对于正在学习的童鞋们，我建议大家没事可以逛逛网站，看看人家的源代码。至于怎么看？从浏览器已经生成的静态代码看（当然如果该公司的代码在github开源了，那就去github中看吧，也可以fork到自己的托管空间下创建派生自己改着玩。），或者去网站上下一些自己感兴趣的或者差不多效果的代码看。多看demo，多加学习。

 

一个月前看到国美金融美易理财的界面，网址：m.gomemyc.com/h5/。觉得它的布局很有意思呀，copy到本地，看了一下它的页面代码。发现在列表那边采用了flex方式的布局。然后就开始上网搜呀~ 网络真的是很好的学习工具O(∩_∩)O哈哈哈~

 

  当时很仔细的看了

1.阮一峰的Flex布局教程：语法篇和实例篇。（写于2015年7月）

语法篇网址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

实例篇网址http://www.ruanyifeng.com/blog/2015/07/flex-examples.html?bsh_bid=683103006

2.大漠根据Chris Coyier翻译的《老的flexbox和新的flexbox》和《使用CSS3 Flexbox》（写于2013年5月）

中文网址：http://www.w3cplus.com/css3/old-flexbox-and-new-flexbox.html

英文网址：http://css-tricks.com/old-flexbox-and-new-flexbox

 

  以下是我的学习成果和案例分析。

如果你正在学习flex或者看了这篇文想要学习flex，那么我建议可以好好看看阮大神的文章。我的学习成果主要基于阮大神的文章，精简总结以便于个人查找。而案例分析，则是自己做的demo的实现，用于展示学习。

 

首先说明一下flex的功能。flex是Flexible Box的缩写，它是一种弹性布局的方式，更多的用在屏幕尺寸大小一大，网页需要适应不同尺寸的屏幕上。Flexbox可以让元素在容器（伸缩容器）中扩展和收缩，从而达到调整整个布局的响应效果。需要注意的一点是，flex布局后，子元素的float、clear、vertical-align属性都会失效。如图1 Flex布局容器展示图。

 

如图1 Flex布局容器展示图

介绍：采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

 

  flex属性

flex-direction  决定主轴方向

flex-wrap     默认情况下，项目都在一条线上，定义如何换行。

flex-flow     上述的简写，默认row nowrap。

justify-content   项目在主轴上的对齐方式

align-items      项目在交叉抽上如何对齐

align-content    多根轴线的对齐方式

 

 

①  .box{flex-derection: row | row-reverse | column | column-reverse;}

row：主轴方向从左到右 。

row-reverse：主轴方向从右到左 。

column：交叉轴方向从上到下。

column-reverse：交叉轴方向从下到上。

 

案例：

 

②  .box{flex-wrap: nowrap | wrap | wrap-reverse;}

nowrap: 默认不换行

wrap： 换行，第一排在上方

wrap-reverse：换行，第一排在下方

 

③ .box { flex-flow:<flex-direction>||<flex-wrap>; }

 

④ .box{justify-content: flex-start |flex-end | center | space-between | space-around;}　

flex-start: 左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，中间间隔

space-around：四周环绕，中间间隔大于item与边界间隔。

 

⑤ .box{align-items: flex-start | flex-end | center |baseline | stretch ;}

flex-start:交叉轴起点

flex-end ：交叉轴终点

center：交叉轴中点

baseline ：项目的第一行文字的基线对齐

stretch ：默认，如果项目未设置高或auto，将占满整个容器。

 

⑥ .box{align-content: flex-start | flex-end | center | space-between |space-around | str }

flex-start：与交叉轴起点对齐

flex-end：与交叉轴终点对齐

center：与交叉轴中点对齐

space-between：两端对齐，中间间隔

space-around：四周环绕，中间间隔大于item与边界间隔。

stretch：默认，如果项目未设置高或auto，将占满整个容器。

 

未完待续。

转载于:https://www.cnblogs.com/lilicat/p/5493394.html