小编Dor*_*ska的帖子

左对齐和居中网格与flexbox

我想使用flexbox(没有媒体查询)实现响应式网格式布局.网格中可以有可变数量的元素.每个项目应具有固定且相等的宽度.项目应与左侧对齐.整个组应该具有相等的左右边距.

看起来应该是这样的:

这就是我试图实现它的方式:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: auto;
}
.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
</div>

Run Code Online (Sandbox Code Playgroud)

它不起作用: