DAY22 搞样式--CSS Gird小进阶（对齐）

前言

CSS Gird 给我们非常大的弹性，我们可以决定元件(item)要在容器(Container)中的哪个位置之外，还可以决定元件(item)要如何对齐。
而且对齐的功能也设置的很弹性，我们可以选择在容器(Container)设定所有元件(item)统一的对齐方式，也可以为个别的元件设立属於他们自己的对齐方式，那一样直接让我们来试看看吧！

水平修改

• 容器(Container)统一修改请配置 justify-items
• 元件(item)个别特制请配置 justify-self

我们可以配置以下四种属性：

1. start：startLine，对齐起始线
   

2. end：endLine，对齐终点线
   

3. center：center，对齐中间
   

4. stretch：延展填满整个元件(item)（预设属性）
   

垂直修改

• 容器(Container)统一修改请配置 align-items
• 元件(item)个别特制请配置 align-self

一样可以配置以下四种属性：

1. start：startLine，对齐起始线
   

2. end：endLine，对齐终点线
   

3. center：center，对齐中间
   

4. stretch：延展填满整个元件(item)（预设属性）
   

简单范例

• 所有元件(item)水平/垂直都置中对齐
  
  我们可以这样写：

.container {
  justify-items: center;
  align-items: center;
}

• 个别元件(item)水平/垂直都置中对齐
  
  我们可以这样写：

.itemA {
  justify-self: center;
  align-self: center;
}

懒人补充

有没有觉得水平/垂直要分开写两行很麻烦的人？请举手！
好唷恭喜你，懒人缩写来了，我们来只写一行吧！

• 容器(Container)统一修改请配置 place-items
• 元件(item)个别特制请配置 place-self

垂直水平置中直接写：

.container{
    place-items: center;
}

阿捏有没有简单？

• 如果只设定一个值，就会同时设定垂直 align-items 跟水平 justify-items 两个属性
• 如果放两个值， 前面是垂直 align-items 属性／後面是水平 justify-items 属性

像这样就是垂直置中，水平置尾

.container{
    place-items: center end;
}

这样有没有很简单呢？
恭喜大家今天会 CSS Gird 对齐罗！可喜可贺！
明天见罗！