僅僅個人用來做筆記，如有不對請指出!!感謝?

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

筆記

為什么要學習Flex？

首先作為一個前端工程師，css布局是一個合格的工程師必備的技能之一 布局分很多種 傳統布局都是基于盒裝模型 有時這些布局是真的讓人很頭疼 特別是垂直居中的時候會很抓狂（比如說我）?? 所以學習一些簡易的布局能節約我們的開發時間 也可以讓我們開發的網頁更具有兼容性和適配性 我個人比較喜歡Flex布局 所以就進行了系統性的學習

Flex的出生地

2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。

什么是Flex布局？

Flex是Flexible Box的縮寫，意為彈性布局 任何容器都能被指定為Flex布局。

分享一個Flex練習的一個網站 可以快速入門和精通 真正的邊玩邊學 不枯燥

flexboxfroggy.com/ 這個就是那個網站非常有趣可以邊學邊實踐 而且還有特別的講解 如果英文不好的話可以使用萬能的Google翻譯?

基本概念

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

容器的屬性

總共有6個屬性在容器上，接下來都用這三個青蛙做比較 方便學習 還有個對比?（你們可以記住他初始的樣子）

1.flex-direction(這個屬性里面有四個值)決定主軸的方向

row（默認值）主軸為水平方向，起點在左端。

row-reverse 主軸為水平方向，起點在右端

column 主軸為垂直方向起點在上面

column-reverse 主軸為垂直方向 起點在下面

2.flex-wrap（這個屬性有三個值）決定多出一行的青蛙如何換行?

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

轉載于:https://juejin.im/post/5d0b3fcdf265da1b8811e1ec

總結

以上是生活随笔為你收集整理的学习阮一峰的Flex布局记录（个人笔记）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。