弹性布局基础介绍

弹性布局

弹性布局操作

.box {
      display: flex;
      /* flex-direction属性决定主轴的方向（即项目的排列方向）。 */
      /* flex-direction:row; 水平从左侧开始 （默认的） */
      /* flex-direction: row-reverse;水平从右侧开始 */
      /* flex-direction: column;柱形 */
      /* flex-direction:column-reverse;倒叙 */
      /* 项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 */
      /* flex-wrap: nowrap;默认的不换行 */
      /* flex-wrap: wrap;换行 */
      /* flex-wrap: wrap-reverse;多出来的不换行 下面的内容换行 */
      /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
      /* flex-flow: row-reverse nowrap; */
      /* justify-content属性定义了项目在主轴上的对齐方式。 */
      /* justify-content: flex-start;左对齐 */
      /* justify-content: flex-end;右对齐 */
      /* justify-content: center;居中 */
      /* justify-content: space-between;两端对齐，项目之间的间隔都相等。 */
      /* justify-content: space-around;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
      /* align-items属性定义项目在交叉轴上如何对齐。 */
      /* align-items: flex-start;起点对齐  */
      /* align-items: flex-end;尾点对齐 */
      /* align-items: center;居中对齐 */
      /* align-items: baseline;项目的第一行文字的基线对齐 */
      /* align-items: stretch;如果项目未设置高度或设为auto，将占满整个容器的高度 */
      /* align-content属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。 */
      /* flex-wrap: wrap; */
      /* align-content: flex-start;交叉轴的起点对齐。 */
      /* align-content: flex-end;与交叉轴的终点对齐。 */
      /* align-content: center;与交叉轴的中点对齐。 */
      /* align-content: space-between;与交叉轴两端对齐，轴线之间的间隔平均分布 */
      /* align-content: space-around;每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 */
      /* align-content: stretch;轴线占满整个交叉轴(默认值) */
      height: 400px;
    }
 
    .item {
      width: 200px;
      height: 200px;
      background-color: yellow;
      margin-left: 20px;
      vertical-align: middle;
      margin-bottom: 20px;
    }
 
    /* 项目属性 */
 
    .item-2 {
      /* height: 400px; */
      /* order:-1;数值越小，排列越靠前，默认为0。 */
      /* flex-grow:2;flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 */
      /* flex-shrink: 0; 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 */
      /* align-self属性 */
      /* align-self: flex-end;结尾对齐 */
      /* align-self: center;居中对齐 */
      align-self: stretch;
    }
   

8

9

10

11

最近写页面突然有用到弹性布局。有些遗忘,所以使用的同时顺便把这些属性都写熟悉一遍。
没事的时候可以学习学习看看