flex和grid的属性介绍

/* 可以用作其它元素的容器/块级盒子 */
    .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: 项目在交叉轴上的对齐方式
    */

发表回复