弹性盒子
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 '> 设置，如果自身的宽度没有定义，则长度取决于内容。
flex可以使元素具有弹性，让元素可以随页面大小的改变而改变。
弹性盒子和浮动的应用相差不多，但是它不会改变原标签的属性只会在原标签的基础上叠加样式 。
并不是像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>
