Flex布局中align-items和justify-content的用法

align-items

沿内联（行）轴对齐网格项（与沿块（列）轴对齐的align-items相对）。 此值适用于容器内的所有网格项目。

Values:

• start – 网格开始位置对齐
• end – 网格结尾位置对齐
• center – 网格中心位置对齐
• stretch – 填充整个网格宽度（默认）

.container {
  align-items: start | end | center | stretch;
}

例子:

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

 

 

justify-content

有时，网格的总大小可能小于其网格容器的大小。 如果您所有网格项目的大小都以非弹性单位（例如px）为单位，则可能会发生这种情况。 在这种情况下，您可以在网格容器中设置网格的对齐方式。 此属性沿内嵌（行）轴对齐网格（与align-content相对于沿块（列）轴对齐网格的``对齐内容''）。

Values:

• start – 将网格与网格容器的起始边缘对齐
• end – 将网格与网格容器的末端边缘对齐
• center – 将网格对齐到网格容器的中心
• stretch – 调整网格项目的大小，以允许网格填充网格容器的整个宽度
• space-around – 在每个网格项目之间放置均匀的空间，在远端放置一半大小的空间
• space-between – 在每个网格项目之间放置均匀的空间，在远端没有空间
• space-evenly – 在每个网格项目之间放置均匀的空间，包括远端

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

Examples:

.container {
  justify-content: start;
}

.container {
  justify-content: end;    
}

.container {
  justify-content: center;    
}

.container {
  justify-content: stretch;    
}

.container {
  justify-content: space-around;    
}

.container {
  justify-content: space-between;    
}

.container {
  justify-content: space-evenly;    
}

参考原文：

https://css-tricks.com/snippets/css/complete-guide-grid/#grid-introduction