接触到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,将占满整个容器。

未完待续。

flex学习小结的更多相关文章

  1. Python 学习小结

    python 学习小结 python 简明教程 1.python 文件 #!/etc/bin/python #coding=utf-8 2.main()函数 if __name__ == '__mai ...

  2. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  3. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

  4. pthread多线程编程的学习小结

    pthread多线程编程的学习小结  pthread 同步3种方法: 1 mutex 2 条件变量 3 读写锁:支持多个线程同时读,或者一个线程写     程序员必上的开发者服务平台 —— DevSt ...

  5. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  6. 点滴的积累---J2SE学习小结

    点滴的积累---J2SE学习小结 什么是J2SE J2SE就是Java2的标准版,主要用于桌面应用软件的编程:包括那些构成Java语言核心的类.比方:数据库连接.接口定义.输入/输出.网络编程. 学习 ...

  7. 【转】【Flex】FLEX 学习网站分享

    [转:http://hi.baidu.com/tanghecaiyu/item/d662fbd7f5fbe02c38f6f764 ] FLEX 学习网站分享 http://blog.minidx.co ...

  8. (转) Parameter estimation for text analysis 暨LDA学习小结

    Reading Note : Parameter estimation for text analysis 暨LDA学习小结 原文:http://www.xperseverance.net/blogs ...

  9. dubbo学习小结

    dubbo学习小结 参考: https://blog.csdn.net/paul_wei2008/article/details/19355681 https://blog.csdn.net/liwe ...

随机推荐

  1. JAVA 问题集中之处以及解决的办法

    也许当你看的时候,你可能认为这些都是简单的问题,有什么好记的.其实不是,我认为,我们往往是因为粗心而造成的错误,当你在开发中碰到这些问题时,你能一下看出来是什么错误,达到提高效率.而且往往你把小的问题 ...

  2. Project server 2016 “没有为此项目配置网站”错误处理

    问题: 没有为此项目配置网站. There is no site configured for this project 解决办法: 依次点击设置>PWA设置>连接到sharepoint网 ...

  3. A new comer playing with Raspberry Pi 3B

    there are some things to do for raspberry pi 3b for the first time: 1, connect pi with monitor/KB/mo ...

  4. MVC 后台管理框架 FineUIMvc 在线示例

     FineUIMvc 在线示例 基础版下载

  5. Oracle数据库的 增、删、改、查

    有时候数据库的查询语句一时想不起来,或不确定是不是语句写的正确,现在整理了一下标准的基本查询语句,便于以后牢记: .数据操作语言 DML:添加(insert into).修改(update   set ...

  6. 开源监控软件ganglia安装手册

    Ganglia是一个监控服务器,集群的开源软件,能够用曲线图表现最近一个小时,最近一天,最近一周,最近一月,最近一年的服务器或者集群的cpu负载,内存,网络,硬盘等指标. Ganglia的强大在于:g ...

  7. 4-3 管理及IO重定向

    1. 系统设定默认输出设备:标准输出(STDOUT,1) 系统设定默认输入设备:标准输入(STDIN,0) 系统设定默认错误设备:标准错误(STDERR,2) 2. 标准输入:键盘 标准输出和错误输出 ...

  8. [原创]下拉框控件react-native-modal-dropdown更新历程

    前言 不知不觉从今年9月发布第一版控件到现在已经快3个月了 过去不断从开源社区索取,一直一直想着有机会一定要回报

  9. jquery $.each终止本次循环

    1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each则对应的使用return true 进入下一个循环,return ...

  10. PHP求职宝典系列——PHP Web 编程篇

    PHP Web 编程篇 form表单 1.简述 POST 和 GET 传输的最大容量分别是多少? GET 方法提交的表单数据被附加到 URL 上,并作为URL 的一部分发送到服务器端. URL 的长度 ...