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;
}