Flexbox 不连续显示项目答案

【问题标题】：Flexbox don't display items in a rowFlexbox 不连续显示项目
【发布时间】：2017-02-02 07:14:10
【问题描述】：

快速提问。我正在尝试使用 flex...

<div class="cont">
    <div class="1">
        <img src="sm1.png" alt="1" title="1" /> short_texttexttext
    </div>
    <div class="2">
        <img src="sm2.png" alt="2" title="2" /> short_texttexttext
    </div>
</div>

在图片上实现效果...

只是居中，居中，但 flex 将图像和文本“合并”为一个项目：

IMG 文字

我想要：

IMG 文字 | IMG 文字（居中）

唯一的选择是添加额外的 div？没门！有什么想法吗？

【问题讨论】：

你目前使用的 CSS 在哪里？
@Hunter Turner 你确实认为不错。这是 css 错误（错误的类名）。但是 [at]Sebastian Brosch 提供了一个很好的解决方案，所以也许有人会利用这个错误。

标签： css flexbox

【解决方案1】：

您可以尝试以下解决方案之一：

提示： CSS 中不允许使用以数字开头的类名。所以你应该重命名类1和2。更多信息在这里：https://stackoverflow.com/a/449000/3840840

解决方案 #1（图片旁边的文字）：

.cont {
  background:yellow;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
}
.d1, .d2 {
  background:red;
  margin:10px;
}

<div class="cont">
  <div class="d1">
    <img src="http://placehold.it/100x100" alt="1" title="1" /> short_texttexttext
  </div>
  <div class="d2">
    <img src="http://placehold.it/100x100" alt="2" title="2" /> short_texttexttext
  </div>
</div>

解决方案 #2（图片下方的文字）：

.cont {
  background:yellow;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
}
.d1, .d2 {
  background:red;
  margin:10px;
  text-align:center;
}

<div class="cont">
  <div class="d1">
    <img src="http://placehold.it/100x100" alt="1" title="1" /><br/>
    short_texttexttext
  </div>
  <div class="d2">
    <img src="http://placehold.it/100x100" alt="2" title="2" /><br/>
    short_texttexttext
  </div>
</div>

【讨论】：

大声笑我刚刚发现我的 css 名称错误... paymets 不是付款... flex 现在工作正常 - 就像从一开始就应该的那样。我以为我做错了什么。感谢您提供好的解决方案！两者都工作正常。标记为已接受的答案。