学习阮一峰的Flex布局记录（个人笔记）

仅仅个人用来做笔记，如有不对请指出!!感谢?

原文地址：www.ruanyifeng.com/blog/2015/0…)
作者：阮一峰大神? 和我自己天马行空的想法?
发表日期： 2015年7月10日

笔记

为什么要学习Flex？

1. 首先作为一个前端工程师，css布局是一个合格的工程师必备的技能之一
   布局分很多种 传统布局都是基于盒装模型 有时这些布局是真的让人很头疼 特别是垂直居中的时候会很抓狂（比如说我）?? 所以学习一些简易的布局能节约我们的开发时间 也可以让我们开发的网页更具有兼容性和适配性 我个人比较喜欢Flex布局 所以就进行了系统性的学习

Flex的出生地

1. 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

什么是Flex布局？

1. Flex是Flexible Box的缩写，意为弹性布局 任何容器都能被指定为Flex布局。
2. 分享一个Flex练习的一个网站 可以快速入门和精通 真正的边玩边学 不枯燥
3. flexboxfroggy.com/ 这个就是那个网站非常有趣可以边学边实践 而且还有特别的讲解 如果英文不好的话可以使用万能的Google翻译?

基本概念

采用Flex布局的元素（Div?） 可以成为Flex的容器 它里面的子元素都是外层大容器的孩子 也可以叫做外层包容了里面所有的小容器

容器的属性

总共有6个属性在容器上，接下来都用这三个青蛙做比较 方便学习 还有个对比?（你们可以记住他初始的样子）

1.flex-direction(这个属性里面有四个值)决定主轴的方向

row（默认值）主轴为水平方向，起点在左端。

row-reverse 主轴为水平方向，起点在右端

column 主轴为垂直方向起点在上面

column-reverse 主轴为垂直方向 起点在下面

2.flex-wrap（这个属性有三个值）决定多出一行的青蛙如何换行?

休息一下，我好懒 ，主要是下班了 以后有空写

转载于:https://juejin.im/post/5d0b3fcdf265da1b8811e1ec