flex布局

display:flex/inline-flex

设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

父元素属性

• flex-flow flex-direction和flex-wrap的缩写形式

  • flex-direction 设置主轴方向

    • row（默认值）： 主轴为水平方向，起点在左端
    • row-reverse： 主轴在水平方向，起点在右端
    • column：主轴为垂直方向，起点在上沿
    • column-reverse：主轴为垂直方向，起点在下沿

  • flex-wrap

    • nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度
    • wrap： 换行，并且第一行在容器最上方
    • wrap-reverse： 换行，并且第一行在容器最下方

• align-content 配合flex-wrap使用

  • stretch（默认值）：轴线占满整个交叉轴
  • flex-start：与交叉轴的起点对齐
  • flex-end：与交叉轴的终点对齐
  • center：与交叉轴的中点对齐
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

• justify-content 项目在主轴上的对齐方式

  • flex-start（默认值）： 项目位于主轴起点。
  • flex-end：项目位于主轴终点。
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔)

• align-items 定义项目在交叉轴上如何对齐。

  • flex-start：交叉轴的起点对齐。(默认)
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

子元素属性

• order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

• flex flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

  • flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。设为非0的子元素按数值平均分配。
  • flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。设为0则不缩小。
  • flex-basis定义项目占据的主轴空间。(如果主轴为水平，则设置这个属性，相当于设置项目的宽度。 原width将会失效。)

  当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：
  .item {flex: none;}
  .item {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: auto;
  }
  当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的：
  .item {flex: auto;}
  .item {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
  }
  当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：
  .item {flex: 1;}
  .item {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0%;
  }

• align-self:定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。

属性值与align-items相同，默认值为auto，表示继承父容器的align-items属性值。

grid布局

display:grid/inline-grid

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

网格容器(Grid Container) 属性

• grid-template-columns

• grid-template-rows

  .container {
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
  }

• <track-size>：定义网格单元的宽高，其单位可以是一个长度(如px、em、rem、vw、vh)或百分比，也可以是网格中*空间的份数(单位为fr)。fr 单元是除去所有非灵活网格项之后的剩余空间等分。
• <line-name>：定义网格线的名称，它不是必须值。可以一个你选择的任意名字，当没有显示设定时，它的名字以数字表示。一条网格线(Grid Line)可以有多个名称,例如 grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];

repeat() 可以简化重复的值,接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

例如 : grid-template-columns: repeat(2, 100px 20px 80px);

• grid-template-areas

  • <grid-area-name>：由网格项的 grid-area 指定的网格区域名称
  • .（点号） ：代表一个空的网格单元
  • none：不定义网格区域

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
 
.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

声明中的每一行都需要有相同数量的单元格。

区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

• grid-gap grid-column-gap和grid-row-gap的合并简写形式

  • grid-row-gap用于设置行间距
  • grid-column-gap用于设置列间距。

• grid-auto-flow

  • row : 默认值 "先行后列"
  • column : "先列后行"
  • row dense
  • column dense

• place-items align-items属性和justify-items属性的合并简写形式

  • justify-items 设置单元格内容的水平位置（左中右）/ align-items 设置单元格内容的垂直位置（上中下）

    • start：对齐单元格的起始边缘。
    • end：对齐单元格的结束边缘。
    • center：单元格内部居中。
    • stretch：拉伸，占满单元格的整个宽度（默认值）。

• place-content align-content属性和justify-content属性的合并简写形式。

如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式

• justify-content 整个内容区域在容器里面的水平位置（左中右） / align-content 整个内容区域的垂直位置（上中下）

  • start : 对齐容器的起始边框。
  • end : 对齐容器的结束边框。
  • center : 容器内部居中。
  • stretch : 项目大小没有指定时，拉伸占据整个网格容器。
  • space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
  • space-between : 项目与项目的间隔相等，项目与容器边框之间没有间隔。
  • space-evenly : 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

• grid-auto-columns / grid-auto-rows 浏览器自动创建的多余网格的列宽和行高。写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

网格项(Grid Item)属性

• grid-column 属性， grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

这两个属性之中，也可以使用span关键字，表示跨越多少个网格。

.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

斜杠以及后面的部分可以省略，默认跨越一个网格。

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

上面代码中，项目item-1占据左上角第一个网格。

如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序

• grid - area

指定项目放在哪一个区域。

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

• place-self align-self属性和justify-self属性的合并简写形式。

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。