学习Flexbox

https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html

笔记

# 手机端的网页是有弹性的
# 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数越大排的越后面
# 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 的方向（左、右或者二者都是）会占据所有剩余空间。
# 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