CSS网格布局学习(6)

2020-07-22 本文已影响0人贪恋冬天的幸福

CSS网格布局也具有与 flex 布局一样的"盒模型对齐"。例如属性 align-items、align-self、justify-items、justify-self，可选值：

auto
normal
start
end
center
stretch
baseline
first baseline
lastbaseline

属性 align-content、justify-content，可选值：

normal
start
end
center
stretch
space-around
space-between
space-evenly
baseline
first baseline
lastbaseline

在父元素上设置 align-items 属性，相当于为所有子元素都设置了 align-self属性，justify-items 与 justify-self 的关系也同理。四个属性的默认值均为 stretch(在项目具有固定宽高比的情况下例外，因为会导致拉伸变形，所以这种情况下默认为start )。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .wrapper {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 10px;
        grid-auto-rows: 100px;
        grid-template-areas:
          "a a a a b b b b"
          "a a a a b b b b"
          "c c c c d d d d"
          "c c c c d d d d";
      }
      .item1 {
        grid-area: a;
        background-color: turquoise;
      }
      .item2 {
        grid-area: b;
        background-color: tomato;
      }
      .item3 {
        grid-area: c;
        background-color: violet;
      }
      .item4 {
        grid-area: d;
        background-color: yellowgreen;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="item1">Item 1</div>
      <div class="item2">Item 2</div>
      <div class="item3">Item 3</div>
      <div class="item4">Item 4</div>
    </div>
  </body>
</html>

布局效果：

默认 stretch 对齐

更改对齐方式：

.item2 {
    align-self: flex-start;
    justify-self: center;
}
.item3 {
    align-self: flex-end;
    justify-self: center;
}
.item4 {
    align-self: center;
    justify-self: center;
}

布局效果：

更改子项目的对齐方式

如果网络轨道整体占据的空间小于网格容器，就可以在容器中对齐网格轨道。分别使用 align-content 、justify-content对齐列轴和行轴。
创建一个有多余空间的网格容器：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        height: 500px;
        width: 500px;
        grid-gap: 10px;
        grid-template-areas:
          "a a b"
          "a a b"
          "c d d";
        background-color: wheat;
      }
      .item1 {
        grid-area: a;
        background-color: turquoise;
      }
      .item2 {
        grid-area: b;
        background-color: tomato;
      }
      .item3 {
        grid-area: c;
        background-color: violet;
      }
      .item4 {
        grid-area: d;
        background-color: yellowgreen;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="item1">Item 1</div>
      <div class="item2">Item 2</div>
      <div class="item3">Item 3</div>
      <div class="item4">Item 4</div>
    </div>
  </body>
</html>

image.png

更改空间分配方式：

.wrapper {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        height: 500px;
        width: 500px;
        grid-gap: 10px;
        grid-template-areas:
          "a a b"
          "a a b"
          "c d d";
        align-content: space-between; 
        justify-content: space-around;
        background-color: wheat;
      }

布局效果：

更改 align-content 与 justify-content 属性调整空间分配
可以看到 Item1 与 Item 2 在列轴方向上空间增大了，因为二者在列轴方向是跨列的项目，align-content: space-between 改变了列轴的轨道宽度，因此导致跨列的项目会在列轴空间上增大。同理，Item1 与 Item4 在行轴方向上跨行，因为 justify-content: space-around 改变了行轴的轨道宽度，因此跨行的项目在行轴空间也增大。

去掉网格容器的对齐，对子项目设置 margin-left: auto; marigin-right: auto ，可以利用自动外边距使元素在项目中对齐。

.item1 {
    margin-left: auto;
    margin-right: auto;
}

布局效果：

利用自动外边距对齐

CSS网格布局学习(6)

猜你喜欢

热点阅读