flex其他属性

子元素设置伸缩比例flex属性

flex-basis一但设定每个子元素的width就会失效。既可以设置px,也可以设置% 或rem格式

    <style>
        #div0 {
            display: flex;
            width: 400px;
            height: 500px;
            background-color: violet;
        }
        #div0 div {
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* flex-basis: 50px; */
        }
        #div0 div:nth-child(1) {
            flex-basis: 50px;
            flex-grow: 1;
        }
        #div0 div:nth-child(2) {
            flex-basis: 100px;
            flex-grow: 1; 
        }
    </style>

flex-grow 设置值为具体的数字，首先我们父div宽度为400，第一个子div设置flex-basis值为50px,第二个为100px，那么横向子div共占150px 剩余250px.

我们使用flew-grow来扩宽，其值为扩宽的区域每个div占的份数，总剩余宽度为250px，每个div占一分，总共两份，每个div分到125px ,此时第一个div宽度为175px，第二个为225px

flex-shrink属性，是当子div宽度超过父div宽度时，会自动进行压缩，和上边拉伸属性对应，我们可以设置压缩的比例

flex属性简写顺序：flex-grow flex-shrink flex-basis

flex的特殊属性

flex：0 0 auto 此时width才会生效，否则还是按basis里的宽度

flex: auto 此时平分400px宽度

统一设置flex 的扩大缩小比例，此时basis属性就不那么重要了

一个是缩小一个扩大属性一起设置会冲突吗？

并不会，扩大属性用于容器有剩余空间，缩小属性用于容器不够