猿问

CSS：如何将最后一个元素向左对齐

由于 justify-content: space-around 规则，当第 4 个块向下跳时，它变成了中间

我可以以某种方式仍然使用空格规则，但使最后一个块不要跳到中心，而是跳到左侧，就像屏幕截图中那样？PS我仍然需要 justify-content: space-around 因为它具有响应式边距

这是代码https://jsfiddle.net/s4fbtkyg/

<html>

<body>


<style>

  .block{

  background-color: grey;

  flex-basis: 100px;

  margin-bottom: 5px;

}


.container{

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

}

</style>


<div class="container">

  <div class="block">1</div>

  <div class="block">2</div>

  <div class="block">3</div>

  <div class="block">4</div>

 </div>

</body>

</html>

截屏


ibeautiful
浏览 102回答 1
1回答

莫回无

您可能需要考虑使用 CSS 网格来完成此任务：grid-template-columns: repeat(auto-fit, 100px); //100px being the width of your choosing这是代码：超文本标记语言<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <title>Document</title></head><body><div class="container">&nbsp; <div class="block">1</div>&nbsp; <div class="block">2</div>&nbsp; <div class="block">3</div>&nbsp; <div class="block">4</div>&nbsp;</div></body></html>CSS.block{&nbsp; background-color: grey;}.container{&nbsp; display: grid;&nbsp; grid-gap: 5px;&nbsp; grid-template-columns: repeat(auto-fit, 100px);&nbsp; justify-content: space-around; //you can still use justify-content: space-around}小提琴：小提琴链接
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答