弹性盒子
一般给flex-basis值为0，让它为正值，进而激活了第一个参数（flex-grow ），第二个参数（ flex-shrink ）可随意填写；此处第一个参数建议参考美工值。
行内块元素如果有一个设置了margin-top属性，则他的同级行内块也会跟着浮动。
flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间;flex可以使元素具有弹性，让元素可以随页面大小的改变而改变；
弹性盒子可以在变成弹性项的情况下，同时设置成为弹性盒子。
none：none关键字的计算值为: 0 0 auto <' flex-grow '>：用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。 在「flex」属性中该值如果被省略则默认为「1」 <' flex-shrink '>：用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。 在收缩的时候收缩比率会以伸缩基准值加权 在「flex」属性中该值如果被省略则默认为「1」 <' flex-basis '>：用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。 在「flex」属性中该值如果被省略则默认为「0%」 在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。
弹性盒子和浮动的应用相差不多，但是它不会改变原标签的属性只会在原标签的基础上叠加样式 。
并不是像display:inline/block一样实现了标签的“变性处理”，他仅仅是在原有基础上叠加了弹性盒子的属性，原有属性和显示方式不发生变化，变化的是一级子项。
应用弹性盒子：块级标签的排版方式，由竖着排将父框排满，变成横着排；默认高度由内容决定；默认高度把父框填满；默认一行排不下不换行；
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>弹性盒子</title><style>body, ul { margin: 0; padding: 0; } ul { width: 400px; height: 100px; line-height: 100px; list-style: none; border: 2pxsolidteal; } li { /* width: 100px; height: 100px; */float: left; } .flex { display: flex;/* 设置弹性盒子 */ } /* 针对整合书写的flex:flex-grow flex-shrink flex-basis 当子元素的总长超过父元素的总长是会使用flex-shrink以达到子元素不溢出的现象，反之子元素小于父元素总长度则会扩大以占满父元素；定义的flex-grow和flex-shrink只会有一个生效；其中flex-basis可直接定义子元素的长度 */ulli:nth-child(1) { /* flex-grow: 1; 此处是单独调试属性*//* flex-shrink: 1; */flex: 11200px; background-color: lightcoral; } ulli:nth-child(2) { /* flex-grow: 2; *//* flex-shrink: 2; */flex: 11200px; background-color: lightgoldenrodyellow; } ulli:nth-child(3) { /* flex-grow: 3; *//* flex-shrink: 3; */flex: 11200px; background-color: lightskyblue; } </style></head><body><ulclass="flex"><li>我是1</li><li>我是2</li><li>我是3</li></ul></body></html>
flex-direction
该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列。
flex-direction：row | row-reverse | column | column-reverse 默认值：row 适用于：flex容器 row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。 row-reverse：对齐方式与row相反。 column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。 column-reverse：对齐方式与column相反。
注：该属性设置在，flex容器中，对应了上面的那句话，弹性元素也可以成为弹性盒子。
flex-direction:设置row为主轴的话，column就变成了侧轴，相当于x轴和y轴。
flex-warp
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
flex-wrap：nowrap | wrap | wrap-reverse 默认值：nowrap 适用于：flex容器 取值： nowrap：flex容器为单行。该情况下flex子项可能会溢出容器 wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse：反转 wrap 排列。
