flex容器必知属性

html代码

<div class="container">
    <div class="item">item1（项目：就是flex容器的子元素）</div>
    <div class="item">item2（项目：就是flex容器的子元素）</div>
    <div class="item">item3（项目：就是flex容器的子元素）</div>
</div>

CSS代码

.container{
/* 转为块级盒子 */
display: block;
/* 转为内联盒子 */
display: inline;
/* 转为弹性盒子 */
display: flex;
height: 20em;
border: 1px solid #232323;
}
.container > .item{
/* flex容器中的子元素，称为flex项目 */
display: flex;
width: 10em;
padding: 1em;
background-color:aliceblue;
}
.container{
/* 转为flex容器 */
display: flex;
/* 纵轴方向 */
flex-direction: column;
/* 主轴方向 */
flex-direction:row;
/* 项目在主轴上排列时，是否允许换行 */
/* 默认不允许换行 */
flex-wrap: nowrap;
/* 允许换行 */
flex-wrap: wrap;
/* 简写方式 */
/* flex-flow: flex-dircetion flex-wrap; */
flex-flow: row nowrap;
/* 第一个属性：flex-flow，控制主轴方向是否换行 */
/* 第二个属性：剩余空间，分配模式 */
/* 将项目的剩余空间，放到右边 */
place-content: start ;
/* 将项目的剩余空间，放到左边 */
place-content: end;
/* 将项目的剩余空间，分到两边 */
place-content: center;
/* 将项目的剩余空间，放到各项目之间，起始和结束边距为0 */
/* 两端对齐 */
place-content: space-between;
/* 将项目的剩余空间，平均分配到各项目的左右两边 */
/* 分散对齐 */
place-content: space-around;
/* 将项目的剩余空间，放到名项目之间，起始和结束的空间，也和各项目之间的间距相等 */
/* 平均对齐 */
place-content: space-evenly;
/* 项目在交叉轴上的对齐 */
/* 自动伸展 */
place-items: stretch;
/* 上对齐 */
place-items: start;
/* 下对齐 */
place-items: end;
/* flex容器必知属性
flex-flow:主轴，换行
place-content:剩余空间分配
place-item:对齐方式 */

}