flex布局常用属性

flex容器上必知的3个属性

flex-flow:主轴，换行
place-content:剩余空间分配方式
place-items：交叉轴对齐方式

flex项目上必知3个属性

flex 项目缩放与宽度
order 主轴排列顺序
place-self 项目在交叉轴上的对齐方式

<div class="container">
    <div class="item">item1（项目：就是flex容器的子元素）</div>
    <div class="item">item2（项目：就是flex容器的子元素）</div>
    <div class="item">item3（项目：就是flex容器的子元素）</div>
</div>
.container{
/* 转为弹性盒子 */
display: flex;
height: 20em;
border: 1px solid #232323;
}
.container > .item{
display: flex;
/* width: 10em;
min-width: 15em; */
padding: 1em;
background-color:aliceblue;
/* 第一个属性 flex */
/* flex：放大因子 收缩因子 项目宽度 */
flex: 0 1 auto; /* 等价于 */ flex: initial;  
/* 
宽度优先级
min-width > flex.width > width  
*/
/* 完全响应式：允许放大，允许缩小，宽度自动 */
flex: 1 1 auto;  /* 等价于 */  flex: auto; /* 缩写方式，后两位取默认值 */ flex:1;
/* PC布局，完全失去响应，禁止放大和缩小 */
flex: 0 0 auto; /* 等价于 */ flex: none;
}
/* 改动项目在主轴上的排列顺序：order 从小到大排列*/
/* 默认值：order:0; */
.container > .item:first-of-type{
background-color: blueviolet;      
order: 3;  
}
.container > .item:nth-of-type(2){
background-color: lightcyan;
order: 1;
place-self: center;
}
.container > .item:nth-of-type(3){
background-color: lightgoldenrodyellow;
order: 2;
}