day5 打卡 flex
每日一句
A good laugh and a long sleep are the best cures in the doctor's book.
医生手册写道：开怀大笑，睡个长觉是最好的灵丹妙药。
引言：布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。而flex布局就变得简单多了。
概念
Flex布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
低版本浏览需加前缀，如Webkit 内核的浏览器，必须加上-webkit前缀。
Tips:
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念：
- 容器：指父元素
- 项目：指子元素
- 主轴：指多个子元素或项目排列方向上的一根轴就是主轴，如果按x方向排列，x就是主轴,按y方向排列，y就是主轴。
- 交叉轴：与主轴垂直的一条轴，就是交叉轴。
容器的相关属性
- 希望父元素独占一行，则设置父元素
display: flex;, 希望多个父元素都占一行，则需每个父元素display:inline-flex;
父元素设置flex之后，可设置的属性有：
flex-direction: 设置主轴的方向，值：
row/column/row-reverse/column-reverse 默认：row (row:行，column:列)
flex-wrap: 设置主轴上的项目在排列方向上显示不下，是否换行显示。值：nowrap(打死不换行)/wrap（换行）
flex-flow: 是flex-direction，flex-wrap的简写, 以空格分隔，默认：row nowrap
justify-content: 设置主轴上对齐方式，值:flex-start/flex-end/center/space-between(两端)/space-around（均匀分布）
align-items: 设置交叉轴上对齐方式，值flex-start/flex-end/baseline(文本基线)/center/stretch(拉伸)
项目相关属性
项目属性是对容器设置属性外，单独对项目设置的属性。 访属性只能设置在项目上，只对该项目有效，不影响其他项目。
主要项目属性：
- order: 指定某项目顺序。数字越小越靠近起点，默认
0. - flex-grow: 指定某项目放大属性。如果容器有足够空间，项目可以放大比例；默认0不放大；值越大，占的空间越多；如项目都设置为
1,则均分整个容器。 - flex-shrink: 指定某项目缩小属性。如果容器空间不足时，项目可以缩小比例；默认1，空间不足等比缩小；0不缩小。
- align-self：设置某一项目在交叉轴上的对齐方式（容器中的align-items是设置容器中项目统一的对齐方式）。值
flex-start/flex-end/center/baseline/center/stretch/auto, 与容器align-items类似，多了一个值auto：表示继承容器的align-items效果。 - flex-basis: 设置某项目的占用空间。没有设置，则为auto，那此项目的宽高则为
width/height; 如flex-basis:200px;，则此项目会覆盖项目的width值。 - flex: 是
flex-grow flex-shrink flex-basis的缩小。默认：0 1 auto,后两位为可选; 该属性有两个快捷值auto:(1 1 auto),none:(0 0 auto）。
