https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html
筆記
# 手機端的網(wǎng)頁是有彈性的
# css3布局：彈性盒子布局Flexbox
# display:flex;
# flex容器屬性:
# 1.flex-direction: row | column | row-reverse | column-reverse
# 2.flex-wrap:wrap(換行) | nowrap(不換行)(默認) | wrap-reverse
# 3.flex-flow：row wrap; 綜合使用 類似border
# 4.justify-content:flex-start(左對齊) || flex-end(右對齊) || center || space-between || space-around
# space-between兩端會對齊粥航，space-around會留出操作空間
# 5.align-items:flex-start(垂直方向的) || flex-end || center || stretch || baseline
# 默認值是stretch. 讓所有的Flex項目高度和Flex容器高度一樣。
# 6.align-content: 用于多行的Flex容器，類似align-items
# Flex項目屬性
# li:nth-child(1)選擇器 選擇第一個孩子(第一個li);
# 1.order:x; x數(shù)越大排的越后面
# 2.flex-grow(增長) 默認值0(不增長) 1（增長）（剩余空間一人一半）
# 3.flex-shrink(收縮) 默認值1(收縮) 0不收縮
# 4.flex-basis 可以指定Flex項目的初始大小 默認的值是auto(由內(nèi)容撐開) 可以取任何用于width屬性的任何值。
# flex是flex-grow淋样、flex-shrink和flex-basis三個屬性的速記（簡寫）,合起來寫，類似border
# flex:1; 相當(dāng)于 flex:1 1 0; 不考慮各自寬度萨醒，平均各占一份
# flex:2 相當(dāng)于flex:2 1 0 獨占2份
# align-self：用來單獨定位迁沫，類似于align-items
# flex-basis:0 時是絕對Flex項目,flex:2 1 0寬度由2決定
# 當(dāng)在Flex項目上使用 margin: auto 時，值為 auto 的方向（左鸳粉、右或者二者都是）會占據(jù)所有剩余空間扔涧。
# flex-direction：column 切換后會使縱軸變成主軸，從而改變flex-basis和justify-content等屬性的效果
# h5的一些標(biāo)簽：
# <main></main>
# <footer></footer>
# <nav></nav>
# <aside></aside>
# <section></section>
# 類似div届谈，語義化
flexbox froggy小游戲枯夜，可以用來練習(xí)css布局
http://flexboxfroggy.com/
flexbox froggy
