flex梳理

1.当父盒子定义了display:flex;其作用只用于父盒子下的子盒子，对子盒子里面的内容无效 

<div class="d1">
    <div class="d2">
        <div class="d3"></div>
        <div class="d3"></div>
    </div>
    <div class="d2">
        <div class="d3"></div>
        <div class="d3"></div>
    </div>
</div>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .d1{
        width: 400px;
        height: 400px;
        background-color: red;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
    }
    .d2{
        width: 180px;
        height: 180px;
        background-color: aqua;
    }
    .d3{
        width: 80px;
        height: 80px;
        background-color: black;
    }
</style>

如上的结构和样式，d1设置flex样式在d3中不会起作用 

 

2.给了flex:1;自适应留白的子元素会根据父元素的宽高自动伸缩，但缩小会有个极限，父盒子小到超出子元素缩小的极限子元素就会溢出，避免溢出的情况可以给父元素加一个overflow：auto；(溢出显示滚动条)

<div class="d1">
    <div><span>1</span><input type="text"></div>
    <div><span>2</span><input type="text"></div>
</div>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .d1{
        width: 80%;
        height: 30px;
        background-color: red;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        border: 1px solid black;
        padding: 20px;
    }
    .d1 div{
        width: 50%;
        display: flex;
        background-color: aqua;
    }
    span{
        padding: 0px 60px;
        border: 2px solid black;
    }
    input{
        flex: 1;
    }
</style>

给出以上结构和样式，可以看到span宽是由内容固定了的，input是占据div除了span的剩余所有宽度，两个div宽是大盒子d1的一半，页面宽度足够的情况下是这样的

input的宽度会随着浏览器窗口宽改变而改变，而当页面缩小到一定程度的时候，会出现以下情况

 

 

可以看到两个input缩小到一定范围不再缩小，溢出了div盒子，暂时想到的解决办法只有给父盒子加overflow:hidden; 隐藏溢出部分或者overflow:auto;显示滚动条来方便查看溢出隐藏的部分。

以下是整理的flex的属性和值的作用