flex布局随笔

作者: 奶酪凌 | 来源:发表于2018-05-15 16:08 被阅读0次

请大家多多指点！

第一，参考网址：
文档一：10分钟学会基本的 Flexbox 布局http://www.css88.com/archives/7760；
文档二：Flexbox布局是如何工作的 – 用大彩图和GIF动画解释http://www.css88.com/archives/7212;
文档三：[web]flex布局浏览器兼容处理https://blog.csdn.net/u014641010/article/details/50968567；
文档四：阮一峰老师 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

兼容性问题.jpg

其实我在刚刚接触的时候，其实不太理解，flex的作用到底体现在哪里？就按照最平常的九宫图来说，float也是可以达到这一个效果。我在一个技术群提问了，有个大佬回答是“flex的响应式自适应”，我按照这个关键词查看度娘。
https://www.aliyun.com/jiaocheng/654666.html

flex小游戏：http://flexboxfroggy.com/

基础：
1.对齐方式
通过设置 justify-content 和align-items，可以使 flex 项水平和垂直放置在 flex 容器的某一个位置。
justify-content：space-around;//中间展示，两边都有空隙
justify-content：space-between;//左右两边紧靠，中间部分平均
justify-content:flex-end; //表示 flex 项在水平方向上靠 flex 容器的末端对齐

justify-content .png

align-items：stretch //使每个 flex item(flex项) 的高度占据整个交叉轴(cross axis)
align-items: baseline //使每个 flex item(flex项) 按照他们段落标签的文本基线（baseline）对齐。

2.排列方向
flex-direction: column; //垂直，竖的排列
flex-direction: row; //横向排列
flex-direction: row-reverse; // 反横向排列
flex-wrap:wrap; //允许 flex 项多行/列排列
flex-wrap:wrap-reverse; //允许 flex 项反向多行/列排列

3.对齐某个特定flex项
align-self：flex-end; | flex-start; //值和对齐方式一致

练习一：