flex 弹性布局

对于是弹性布局， 需要在父级元素上。#parent{ display:flex }

如果原先定义了子元素的高度， 会变成无效， 因为默认???shrink

如果需要元素页面居中，

.item{

　　justify-content: center;

　　align-items:center;

//这两个用的很多， align-content:用的很少， 除非flex-direction;column

}

flex-shrink可以压缩内容到自动，如果不想对元素压缩， 使用width和flex-basic中定义的宽度， 需要使用flex-shrink:0

flex-grow:是对剩余空间进行填充， 所以flex-fow：2， flex-grow:1结果两个元素不是2：1,因为有flex-basic

但是如果想要两个元素2：1，flex-basic: 0;就可以了

三圣杯：

.all{

            display: flex;

            height: 300px;

        }

        .item:first-child{

            background: yellow;

            flex: 0 0 200px; 

        }

        .item:last-child{

            background: green;

            flex: 0 0 200px; 

        }

        .item:nth-child(2){

            background: red;

            flex-grow: 1;

        }

 

 

flex:1 -> flex-grow:1;flex-shrink:1,flex-basic:auto