弹性盒模型适配-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;
}