弹性盒模型适配-y=ax+b
弹性盒模型适配-y=ax+b
ul下的li显示display:flex;
ul{
width:800px;
height:100px;
display:flex;
}
每个元素自己左浮动了,margin没有合并。
tainxing1
如果把宽度该为400px,不够5个<li>看看发生什么情况?
ping2
宽度发生了变化，高度够用所以没有变化,margin任然保持.同理，我们测试了高度
tanxing3
发现高度会超出，不会自动缩小.
总结:
- display:flex;会让元素左浮动
- 如果ul设置宽度不够，会缩小子元素的宽度满足条件,有个居中的好处。
- 如果ul高度放不下li,不会缩小高度
然后我们测试一下,flex-wrap:wrap；
如果加上这句，
ul{
width: 500px;
height: 100px;
border: 3px solid #000;
margin: 0;
padding:0;
list-style: none;
background-color: gold;
margin: 50px auto;
display: flex;
flex-wrap:wrap;
}
tanxing4
这个发现这家伙不会宽度不会缩小了，像吃了兴奋剂,宽度保持，换行。默认值是flex-wrap:no-wrap;
注意:不给高度会自动张开，以下不给高度了。
接下来看看flex-wrap:wrap-reverse;
tanxing4wraprever
从底部排布，一直往上.
总结:
- display:flex;可以和flex-wrap;结合使用，用来调整换行，默认不换行，压缩宽度
- flex-warp:还有wrap,wrap-reverse，reverse从底部排
- ul不给高度会自动撑开
flex-flow:可以同时设置两个值（flex-flow:flex-direction|flex-wrap）
下面看看强大的，justify-content:flex-start|flex-end|center|space-between|space-around
justify-content:start
justifyflex-start
justify-content:end
justifyflex-end
justify-content:center
justifyflex-center
start保持开头margin,end保持后边margin，center保持中间两倍margin，不重合。
justify-content:center
justify-content:space-around
justify-spacearound
between这是两边对其顶满。
align-items:flex-start
整体偏上，当然ul设置了高度，不然就会margin都一样，但这里虽然margin不一样了，但是每个的高度都一样的。整体偏上。
align-itemsstart
align-items:flex-end
align-itemsend
发现整体偏下
对比
align-items:center;第一排元素 的上边距，和最后一排下边距相等
alignitems-center
内部内容下边界对其，可以用于图片？？
alignitemsbaseline
align-items:strech
只有在高度取消时有作用
alignitemsstrech
align-content:start,end,center,around,between;
align-content:center,align-items:center,justify-flex:center区别？？
justify-center:针对单行居中,保持中间间距
align-content:center,保持内容整体部分，间距，整体居中。但是上下左右边距不再保持。
algn-items:元素个体单体为单位,每个的间距都不在保持。
grow2
grow2并不是2是1的两倍，而是增长是1的两倍。原来是50，一个增加40，一个增加80.
减少shrink也是一样。
flex-basis:初始值，从什么时候开始增加？？
适配是一个y = ax + b的过程。
可以设置b
单独设置，一个的排布
ul:nth-child(2){
align-self:flex-end;
}
