使用flexbox在div容器中对齐div元素

Question

你可以在这个问题上帮助我吗？我有这个包含7个div的div。目前，使用弹性框，我得到了这个输出

然而，我想要发生的事情应该是这样的：

以下是我粗略的一些代码

.Container {
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.Items {
  margin-bottom: 7px;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 12px;
  line-height: 10px;
  border: 0px;
  padding-bottom: 7px;
  align-self: center;
}

<div class="Container">
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
</div>

更新 谢谢那些回复的人。但是，我忘了添加这些东西。

1. 我希望图标均匀分布，这就是我需要justify-content: space-around
的原因
2. 我也希望图标水平位于中心，这就是我使用align-items: center; align-content: center;
的原因

问题在于：是否可以同时使用两者？

Answer 1

而不是justify-content: space-around使用justify-content: flex-start。

演示：http://jsfiddle.net/rsvmsku6/

更新（根据评论）：

有关创建水平居中网格的指导，但子元素左对齐，请参阅以下帖子：

• How to center a flex container but left-align flex items
• Center align container and left align child elements

Answer 2

从Container中删除以下css：

justify-content: space-around;

Answer 3

justify-content: space-around;

这是你的问题。如果删除该行，则项目也会按您的要求显示

JSFiddle

space-around：

  

项目均匀分布在线条周围，空间相等

flex-start（默认）

  

项目在起始行打包

Answer 4

您不需要某些元素。

• align-items
• align-content

您还需要将justify-content设置为flex-start，并始终将其设置为左侧。

＆＃13;

＆＃13;

.Container {
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 320px;
}
.Items {
  margin-bottom: 7px;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 12px;
  line-height: 10px;
  border: 0px;
  padding-bottom: 7px;
  align-self: center;
}

＆＃13;

<div class="Container">
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;