僅僅個(gè)人用來(lái)做筆記，如有不對(duì)請(qǐng)指出!!感謝?

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

筆記

為什么要學(xué)習(xí)Flex？

首先作為一個(gè)前端工程師，css布局是一個(gè)合格的工程師必備的技能之一 布局分很多種 傳統(tǒng)布局都是基于盒裝模型 有時(shí)這些布局是真的讓人很頭疼 特別是垂直居中的時(shí)候會(huì)很抓狂（比如說(shuō)我）?? 所以學(xué)習(xí)一些簡(jiǎn)易的布局能節(jié)約我們的開(kāi)發(fā)時(shí)間 也可以讓我們開(kāi)發(fā)的網(wǎng)頁(yè)更具有兼容性和適配性 我個(gè)人比較喜歡Flex布局 所以就進(jìn)行了系統(tǒng)性的學(xué)習(xí)

Flex的出生地

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

什么是Flex布局？

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

分享一個(gè)Flex練習(xí)的一個(gè)網(wǎng)站 可以快速入門和精通 真正的邊玩邊學(xué) 不枯燥

flexboxfroggy.com/ 這個(gè)就是那個(gè)網(wǎng)站非常有趣可以邊學(xué)邊實(shí)踐 而且還有特別的講解 如果英文不好的話可以使用萬(wàn)能的Google翻譯?

基本概念

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

容器的屬性

總共有6個(gè)屬性在容器上，接下來(lái)都用這三個(gè)青蛙做比較 方便學(xué)習(xí) 還有個(gè)對(duì)比?（你們可以記住他初始的樣子）

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

row（默認(rèn)值）主軸為水平方向，起點(diǎn)在左端。

row-reverse 主軸為水平方向，起點(diǎn)在右端

column 主軸為垂直方向起點(diǎn)在上面

column-reverse 主軸為垂直方向 起點(diǎn)在下面

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

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

轉(zhuǎn)載于:https://juejin.im/post/5d0b3fcdf265da1b8811e1ec

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。