Question

我给了我的父div一个带有一些flex属性的类，希望每行显示两张卡很好地像这样：

 _ _
 _ _
 _ _
 _ _

但是，出于某种原因，内容如下所示：

 _ _
 _ _
 _ _
_ _

最后一行总是有奇怪的边距和间距。这是我的类具有flex属性：

.student-card-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

这是一个父容器，它获取flex属性。里面有个人卡片。

    <div className="container student-card-container">
        { this.state.projects ? projectsArr : null } //Individual Card
    </div>

以下是单张卡的外观：

  <div className="card student-card">
    <div className="card-block main-card-block">
      <h4 className="card-title">{ this.props.title }</h4>
      <div className="row">
        <div className="col-xs-3">
          <h6 className="card-subtitle text-muted pull-right"><i className="fa fa-clock-o" aria-hidden="true"></i> { this.props.hours } hours</h6>
        </div>
        <div className="col-xs-3">
          <h6 className="card-subtitle text-muted pull-right">34 checkpoints</h6>
        </div>
        <div className="col-xs-3">
          <h6 className="card-subtitle text-muted pull-right"><i className="fa fa-check-circle-o" aria-hidden="true"></i> complete</h6>
        </div>
      </div>

    </div>
    { /* <img data-src="..." alt="Card image"/> */ }
    <div className="card-block">
      <p className="card-text">{ this.props.desc }</p>          
    </div>
  </div>

不确定它是否有帮助，但这里是card类的CSS：

.card {
    position: relative;
    display: block;
    margin-bottom: .75rem;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: .25rem;
}

任何人都知道为什么最后一行失去了很好的余量和填充？

<div class="container student-card-container" data-reactid=".0.0.0:1.1"><div class="card student-card" data-reactid=".0.0.0:1.1.0"><div class="card-block main-card-block" data-reactid=".0.0.0:1.1.0.0"><h4 class="card-title" data-reactid=".0.0.0:1.1.0.0.0">jQuery stuff</h4><div class="row" data-reactid=".0.0.0:1.1.0.0.1"><div class="col-xs-3" data-reactid=".0.0.0:1.1.0.0.1.0"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.0.0.1.0.0"><i class="fa fa-clock-o" aria-hidden="true" data-reactid=".0.0.0:1.1.0.0.1.0.0.0"></i><span data-reactid=".0.0.0:1.1.0.0.1.0.0.1"> </span><span data-reactid=".0.0.0:1.1.0.0.1.0.0.2">30</span><span data-reactid=".0.0.0:1.1.0.0.1.0.0.3"> hours</span></h6></div><div class="col-xs-3" data-reactid=".0.0.0:1.1.0.0.1.1"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.0.0.1.1.0">34 checkpoints</h6></div><div class="col-xs-3" data-reactid=".0.0.0:1.1.0.0.1.2"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.0.0.1.2.0"><i class="fa fa-check-circle-o" aria-hidden="true" data-reactid=".0.0.0:1.1.0.0.1.2.0.0"></i><span data-reactid=".0.0.0:1.1.0.0.1.2.0.1"> complete</span></h6></div></div></div><div class="card-block" data-reactid=".0.0.0:1.1.0.1"><p class="card-text" data-reactid=".0.0.0:1.1.0.1.0">you will learn so much about jQuery in this project, that it will blow your freaking mind</p></div></div><div class="card student-card" data-reactid=".0.0.0:1.1.1"><div class="card-block main-card-block" data-reactid=".0.0.0:1.1.1.0"><h4 class="card-title" data-reactid=".0.0.0:1.1.1.0.0">JavaScript</h4><div class="row" data-reactid=".0.0.0:1.1.1.0.1"><div class="col-xs-3" data-reactid=".0.0.0:1.1.1.0.1.0"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.1.0.1.0.0"><i class="fa fa-clock-o" aria-hidden="true" data-reactid=".0.0.0:1.1.1.0.1.0.0.0"></i><span data-reactid=".0.0.0:1.1.1.0.1.0.0.1"> </span><span data-reactid=".0.0.0:1.1.1.0.1.0.0.2">140</span><span data-reactid=".0.0.0:1.1.1.0.1.0.0.3"> hours</span></h6></div><div class="col-xs-3" data-reactid=".0.0.0:1.1.1.0.1.1"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.1.0.1.1.0">34 checkpoints</h6></div><div class="col-xs-3" data-reactid=".0.0.0:1.1.1.0.1.2"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.1.0.1.2.0"><i class="fa fa-check-circle-o" aria-hidden="true" data-reactid=".0.0.0:1.1.1.0.1.2.0.0"></i><span data-reactid=".0.0.0:1.1.1.0.1.2.0.1"> complete</span></h6></div></div></div><div class="card-block" data-reactid=".0.0.0:1.1.1.1"><p class="card-text" data-reactid=".0.0.0:1.1.1.1.0">you will learn so much about javascript in this section that it will blow your freaking mind.</p></div></div><div class="card student-card" data-reactid=".0.0.0:1.1.2"><div class="card-block main-card-block" data-reactid=".0.0.0:1.1.2.0"><h4 class="card-title" data-reactid=".0.0.0:1.1.2.0.0">CSS</h4><div class="row" data-reactid=".0.0.0:1.1.2.0.1"><div class="col-xs-3" data-reactid=".0.0.0:1.1.2.0.1.0"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.2.0.1.0.0"><i class="fa fa-clock-o" aria-hidden="true" data-reactid=".0.0.0:1.1.2.0.1.0.0.0"></i><span data-reactid=".0.0.0:1.1.2.0.1.0.0.1"> </span><span data-reactid=".0.0.0:1.1.2.0.1.0.0.2">40</span><span data-reactid=".0.0.0:1.1.2.0.1.0.0.3"> hours</span></h6></div><div class="col-xs-3" data-reactid=".0.0.0:1.1.2.0.1.1"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.2.0.1.1.0">34 checkpoints</h6></div><div class="col-xs-3" data-reactid=".0.0.0:1.1.2.0.1.2"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.2.0.1.2.0"><i class="fa fa-check-circle-o" aria-hidden="true" data-reactid=".0.0.0:1.1.2.0.1.2.0.0"></i><span data-reactid=".0.0.0:1.1.2.0.1.2.0.1"> complete</span></h6></div></div></div><div class="card-block" data-reactid=".0.0.0:1.1.2.1"><p class="card-text" data-reactid=".0.0.0:1.1.2.1.0">You will learn so much about CSS in this chapter that it will blow your freaking mind.</p></div></div><div class="card student-card" data-reactid=".0.0.0:1.1.3"><div class="card-block main-card-block" data-reactid=".0.0.0:1.1.3.0"><h4 class="card-title" data-reactid=".0.0.0:1.1.3.0.0">HTML</h4><div class="row" data-reactid=".0.0.0:1.1.3.0.1"><div class="col-xs-3" data-reactid=".0.0.0:1.1.3.0.1.0"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.3.0.1.0.0"><i class="fa fa-clock-o" aria-hidden="true" data-reactid=".0.0.0:1.1.3.0.1.0.0.0"></i><span data-reactid=".0.0.0:1.1.3.0.1.0.0.1"> </span><span data-reactid=".0.0.0:1.1.3.0.1.0.0.2">10</span><span data-reactid=".0.0.0:1.1.3.0.1.0.0.3"> hours</span></h6></div><div class="col-xs-3" data-reactid=".0.0.0:1.1.3.0.1.1"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.3.0.1.1.0">34 checkpoints</h6></div><div class="col-xs-3" data-reactid=".0.0.0:1.1.3.0.1.2"><h6 class="card-subtitle text-muted pull-right" data-reactid=".0.0.0:1.1.3.0.1.2.0"><i class="fa fa-check-circle-o" aria-hidden="true" data-reactid=".0.0.0:1.1.3.0.1.2.0.0"></i><span data-reactid=".0.0.0:1.1.3.0.1.2.0.1"> complete</span></h6></div></div></div><div class="card-block" data-reactid=".0.0.0:1.1.3.1"><p class="card-text" data-reactid=".0.0.0:1.1.3.1.0">There is not that much to learn about HTML butttt you will learn so much about HTML in this checkpoint, that it will blow your freaking mind.</p></div></div></div>

Flexbox证明内容在最后一行有奇怪的行为

0 个答案: