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

展示

代码

• HTML：

  <section>
  <h4>justify-content:stretch</h4>
  <div class="container justify-stretch">
      <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-content: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-content: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-content: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>justify-content:space-between</h4>
  <div class="container justify-space-between">
      <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-content:space-around</h4>
  <div class="container justify-space-around">
      <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-content:space-evenly</h4>
  <div class="container justify-space-evenly">
      <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>
  </section>
  <section>
  <h4>align-content: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-content: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-content: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-content: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>
  <h4>align-content:space-between</h4>
  <div class="container align-space-between">
      <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-content:space-around</h4>
  <div class="container align-space-around">
      <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-content:space-evenly</h4>
  <div class="container align-space-evenly">
      <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>
  </section>

• CSS：

  .container {
      display: grid;
      height: 240px;
      grid: auto auto / auto auto;
      outline: 1px dotted;
  }
  .container item {
      outline: 1px dashed red;
      background-color: #d8e8f7;
  }
  .container img {
      display: block;
      width: 100px; height: 100px;
      object-fit: contain;
  }
  .justify-stretch {
      justify-content: stretch;
  }
  .justify-start {
      justify-content: start;
  }
  .justify-end {
      justify-content: end;
  }
  .justify-center {
      justify-content: center;
  }
  .justify-space-between {
      justify-content: space-between;
  }
  .justify-space-around {
      justify-content: space-around;
  }
  .justify-space-evenly {
      justify-content: space-evenly;
  }
  
  .align-start {
      align-content: start;
  }
  .align-end {
      align-content: end;
  }
  .align-center {
      align-content: center;
  }
  .align-space-between {
      align-content: space-between;
  }
  .align-space-around {
      align-content: space-around;
  }
  .align-space-evenly {
      align-content: space-evenly;
  }