justify-items/align-items属性值样式表现实例页面
展示
justify-items:stretch
![](../images/nature-1.jpg)
![](../images/wallpaper-1.jpg)
![](../images/wallpaper-3.jpg)
![](../images/nature-4.jpg)
justify-items:start
![](../images/nature-1.jpg)
![](../images/wallpaper-1.jpg)
![](../images/wallpaper-3.jpg)
![](../images/nature-4.jpg)
justify-items:end
![](../images/nature-1.jpg)
![](../images/wallpaper-1.jpg)
![](../images/wallpaper-3.jpg)
![](../images/nature-4.jpg)
justify-items:center
![](../images/nature-1.jpg)
![](../images/wallpaper-1.jpg)
![](../images/wallpaper-3.jpg)
![](../images/nature-4.jpg)
align-items:stretch
![](../images/nature-1.jpg)
![](../images/wallpaper-1.jpg)
![](../images/wallpaper-3.jpg)
![](../images/nature-4.jpg)
align-items:start
![](../images/nature-1.jpg)
![](../images/wallpaper-1.jpg)
![](../images/wallpaper-3.jpg)
![](../images/nature-4.jpg)
align-items:end
![](../images/nature-1.jpg)
![](../images/wallpaper-1.jpg)
![](../images/wallpaper-3.jpg)
![](../images/nature-4.jpg)
align-items:center
![](../images/nature-1.jpg)
![](../images/wallpaper-1.jpg)
![](../images/wallpaper-3.jpg)
![](../images/nature-4.jpg)
align-items:baseline/<img> display:block
![](../images/nature-1.jpg)
![](../images/nature-4.jpg)
align-items:baseline/<img> display:inline
![](../images/nature-1.jpg)
![](../images/nature-4.jpg)
//zxx: baseline在Firefox和Chrome有兼容性差异,谨慎使用
代码
-
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; }