justify-items/align-items属性值样式表现实例页面

展示

代码

• HTML：

  <h4>justify-items:stretch</h4>
  <div class="container">
      <item><img src="nature-1.jpg"></item>
      <item><img src="wallpaper-1.jpg"></item>
      <item><img src="wallpaper-3.jpg"></item>
      <item><img src="nature-4.jpg"></item>    
  </div>
  <h4>justify-items:start</h4>
  <div class="container justify-start">
      <item><img src="nature-1.jpg"></item>
      <item><img src="wallpaper-1.jpg"></item>
      <item><img src="wallpaper-3.jpg"></item>
      <item><img src="nature-4.jpg"></item> 
  </div>
  <h4>justify-items:end</h4>
  <div class="container justify-end">
      <item><img src="nature-1.jpg"></item>
      <item><img src="wallpaper-1.jpg"></item>
      <item><img src="wallpaper-3.jpg"></item>
      <item><img src="nature-4.jpg"></item> 
  </div>
  <h4>justify-items:center</h4>
  <div class="container justify-center">
      <item><img src="nature-1.jpg"></item>
      <item><img src="wallpaper-1.jpg"></item>
      <item><img src="wallpaper-3.jpg"></item>
      <item><img src="nature-4.jpg"></item> 
  </div>
  
  <h4>align-items:stretch（默认值）</h4>
  <div class="container">
      <item><img src="nature-1.jpg"></item>
      <item><img src="wallpaper-1.jpg"></item>
      <item><img src="wallpaper-3.jpg"></item>
      <item><img src="nature-4.jpg"></item>    
  </div>
  <h4>align-items:start</h4>
  <div class="container align-start">
      <item><img src="nature-1.jpg"></item>
      <item><img src="wallpaper-1.jpg"></item>
      <item><img src="wallpaper-3.jpg"></item>
      <item><img src="nature-4.jpg"></item> 
  </div>
  <h4>align-items:end</h4>
  <div class="container align-end">
      <item><img src="nature-1.jpg"></item>
      <item><img src="wallpaper-1.jpg"></item>
      <item><img src="wallpaper-3.jpg"></item>
      <item><img src="nature-4.jpg"></item> 
  </div>
  <h4>align-items:center</h4>
  <div class="container align-center">
      <item><img src="nature-1.jpg"></item>
      <item><img src="wallpaper-1.jpg"></item>
      <item><img src="wallpaper-3.jpg"></item>
      <item><img src="nature-4.jpg"></item> 
  </div>

• CSS：

  .container {
      display: grid;
      height: 300px;
      grid: 1fr 1fr / 1fr 1fr;
      outline: 1px dotted;
  }
  .container item {
      outline: 1px dashed red;
      background-color: #d8e8f7;
  }
  .container img {
      display: block;
      max-width: 120px; max-height: 120px;
      object-fit: contain;
  }
  .justify-start {
      justify-items: start;
  }
  .justify-end {
      justify-items: end;
  }
  .justify-center {
      justify-items: center;
  }
  .align-start {
      align-items: start;
  }
  .align-end {
      align-items: end;
  }
  .align-center {
      align-items: center;
  }
  .align-baseline {
      align-items: baseline;
  }
  .align-baseline ~ .align-baseline img {
      display: inline;
  }