如果父母是弹性盒子，则使元素阻塞

Question

JSFIDDLE：https://jsfiddle.net/bnfsnm40/

标记：

1) one spring web project：DemoWeb.war
2) two tomcat (port: 8080/8081)
3) spring-session-redis(Using spring-session-redis to realize distributed session.)

我想做什么：

<div class="card"> <div class="card-header">Download stats</div> <div class="card-block"> <div class="statistics"> <span class="day statistic"> <div class="count">100</div> <div class="rank">10th</div> <div class="icon text-success"> <i class="fa fa-line-chart "></i> +4 </div> </span> ，count和rank应该是icon，因此它们彼此相同。 如果我将它们设置为显示：阻止它们只是不像我期望正常的块元素将起作用，它们仍然彼此相邻而不是从上到下。

display: block

Answer 1

flex展示项目有两个选项，因此它们是＆＃34;＆＃34;＆＃34;＆＃34;彼此垂直。

选项1 - 在父容器上设置flex-wrap:wrap;，在子容器上设置width:100%;。

选项2 - 在父容器上设置flex-direction:column;。