/* 可以用作其它元素的容器/块级盒子 */
.container {
/* 转为块级盒子 */
/* display: block; */
/* 转为内联盒子 */
/* display: inline; */
/* 转为”弹性盒子” */
display: flex;
height: 20em;
border: 1px solid #000;
}
/* 将live server 插件的默认浏览器, 由chrome 临时 改为 firefox */
.container > .item {
/* flex容器中的”子元素”, 则称为”flex项目” */
width: 10em;
/* height: 5em; */
padding: 1em;
background-color: lightcyan;
border: 1px solid #000;
}
.container {
/* display: flex; */
/* 主轴方向 */
/* flex-direction: row; */
/* flex-direction: column; */
/* 项目在主轴上排列时,是否允许换行 */
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* 推荐使用简写 */
/* flex-flow: flex-direction flex-wrap; */
flex-flow: row nowrap;
/* flex-flow: row wrap; */
/* 第一个属性: flex-flow, 控制主轴方向与是否换行 */
/* 第二个属性: place-content 容器中的剩余空间在项目之间如何进行分配 */
/* 第一种分配方案: 将所有项目看成一个整体,将剩余空间在所有项目二边进行分配 */
/* 将所有剩余空间全部分到了右边,所有项目从左边开始排列 */
place-content: start;
/* 将所有剩余空间全部分到了左边,所有项目从右边开始排列 */
place-content: end;
/* 将所有剩余空间在所有项目左右二边平均分配 */
place-content: center;
/* 第二种方案: 将所有项目看成一个独立的个体,将剩余空间在所有项目之间进行分配 */
/* 二端对齐 */
place-content: space-between;
/* 分散对齐 */
place-content: space-around;
/* 平均对齐 */
place-content: space-evenly;
/* 第三个属性: palce-items 项目在交叉轴上的对齐 */
/* 自动伸展 */
place-items: stretch;
/* 上对齐 */
place-items: start;
/* 下对齐 */
place-items: end;
}
/*
flex容器三个必知属性
1. flex-flow: 主轴, 换行
2. place-content: 项目在主轴上的排列与剩余空间分配
3. palce-items: 项目在交叉轴上的对齐方式
*/