您可以在flex-container中添加flex-direction:column

.flex-container {
  flex-direction: column;
}

将display:inline-block添加到flex-item

.flex-item {
 display: inline-block;
}

因为您添加的宽度和高度对该元素没有影响，因为它具有内联显示。尝试添加display:inline-block或display:block。了解更多关于宽度和高度的知识。

也添加到row类(你被给予row{}而不是作为样式)

.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}

工作演示:

.flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content:center; flex-direction:column; } .row{ width:100%; margin:0 auto; text-align:center; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; display: inline-block; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> </div> <div class="row"> <span class="flex-item">2</span> </div> <div class="row"> <span class="flex-item">3</span> </div> <div class="row"> <span class="flex-item">4</span> </div> </div>

工作演示栏:

.flex-container { padding: 0; margin: 0; width: 100%; list-style: none; display: flex; align-items: center; } .row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; display: inline-block; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> </div> <div class="row"> <span class="flex-item">2</span> </div> <div class="row"> <span class="flex-item">3</span> </div> <div class="row"> <span class="flex-item">4</span> </div> </div>

您可以在flex-container中添加flex-direction:column

.flex-container {
  flex-direction: column;
}

将display:inline-block添加到flex-item

.flex-item {
 display: inline-block;
}

因为您添加的宽度和高度对该元素没有影响，因为它具有内联显示。尝试添加display:inline-block或display:block。了解更多关于宽度和高度的知识。

也添加到row类(你被给予row{}而不是作为样式)

.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}

工作演示:

.flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content:center; flex-direction:column; } .row{ width:100%; margin:0 auto; text-align:center; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; display: inline-block; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> </div> <div class="row"> <span class="flex-item">2</span> </div> <div class="row"> <span class="flex-item">3</span> </div> <div class="row"> <span class="flex-item">4</span> </div> </div>

工作演示栏:

.flex-container { padding: 0; margin: 0; width: 100%; list-style: none; display: flex; align-items: center; } .row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; display: inline-block; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> </div> <div class="row"> <span class="flex-item">2</span> </div> <div class="row"> <span class="flex-item">3</span> </div> <div class="row"> <span class="flex-item">4</span> </div> </div>

我想你想要的东西是这样的。

html, body { height: 100%; } body { margin: 0; } .flex-container { height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; } .row { width: auto; border: 1px solid blue; } .flex-item { background-color: tomato; padding: 5px; width: 20px; height: 20px; margin: 10px; line-height: 20px; color: white; font-weight: bold; font-size: 2em; text-align: center; } <div class="flex-container"> <div class="row"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> </div> </div>

参见demo: http://jsfiddle.net/audetwebdesign/tFscL/

如果你想让高度和上下填充正常工作，你的.flex-item元素应该是块级(div而不是span)。

同样，在.row上，将宽度设置为auto，而不是100%。

你的.flex-container属性没问题。

如果你想要.row在视图端口中垂直居中，为html和body指定100% height，并将body边距归零。

请注意，.flex-container需要一个高度来查看垂直对齐效果，否则，容器将计算包含内容所需的最小高度，该高度小于本例中的视图端口高度。

补充说明: flex-flow、flex-direction、flex-wrap属性可以使这个设计更容易实现。我认为.row容器是不需要的，除非你想在元素(背景图像、边框等)周围添加一些样式。

一个有用的资源是:http://demo.agektmr.com/flexbox/

不要忘记使用重要的浏览器特定属性:

对齐项目:中心;-->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justify-content:中心;-->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

你可以阅读这两个链接来更好地理解flex: http://css-tricks.com/almanac/properties/j/justify-content/和 http://ptb2.me/flexbox/

祝你好运。

用这个:

   html, body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

像这样的HTML标记:

   <html>
      <body>
        <main>
          <button> abc </button>
          <p> something </p>
        </main>
      </body>
    </html>

Html, body { 显示:flex; 对齐项目:中心; justify-content:中心; 高度:100%; ｝ < html > 身体< > <大> <button> ABC </button> <p> something </p> 主> < / 身体< / > < / html >

1 -设置CSS在父div显示:flex;

2 -在父div上设置CSS为flex-direction: column;注意，这将使该div行中的所有内容从上到下。如果父div只包含子div而不包含其他div，那么这样做效果最好。

3 -在父div上设置CSS为justify-content: center;

下面是CSS的一个例子:

.parentDivClass { 显示:flex; flex-direction:列; justify-content:中心; ｝