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(由內容撐開)  可以取任何用于width屬性的任何值。
# flex是flex-grow、flex-shrink和flex-basis三個屬性的速記（簡寫）,合起來寫，類似border

# flex:1; 相當于 flex:1 1 0; 不考慮各自寬度，平均各占一份
# flex:2 相當于flex:2 1 0 獨占2份
# align-self：用來單獨定位，類似于align-items
# flex-basis:0 時是絕對Flex項目,flex:2 1 0寬度由2決定
# 當在Flex項目上使用 margin: auto 時，值為 auto 的方向（左、右或者二者都是）會占據(jù)所有剩余空間。
# flex-direction：column 切換后會使縱軸變成主軸，從而改變flex-basis和justify-content等屬性的效果

# h5的一些標簽：
# <main></main>
# <footer></footer>
# <nav></nav>
# <aside></aside>
# <section></section>
# 類似div，語義化

flexbox froggy小游戲，可以用來練習css布局
http://flexboxfroggy.com/

flexbox froggy