Flex-box justify-content 不工作而 align-items 工作

Question

我正在尝试使用 justify-content 和 flex box 移动文本，而 align-items 可以垂直移动内容，justify-content 无法水平移动内容。

我知道我可以使用 text-align，但是我不喜欢它将所有文本移动到最右边的方式，包括 sub-title 文本，我想从同一个地方开始就像标题一样 - 我相信这就是 justify-content 会做的。

CodePen: http://codepen.io/gutterboy/pen/yYxmLP

HTML:

<div id="main-slider" class="carousel">
  <div class="container">
    <div class="row">
      <div class="col-sm-offset-1 col-sm-10">
        <div class="carousel-inner" role="listbox">
          <div class="item item1 active">
            <img src="http://dreamatico.com/data_images/car/car-1.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>
          <div class="item item2">
            <img src="http://dreamatico.com/data_images/car/car-8.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
</div>

<ol class="carousel-indicators">
  <li data-target="#main-slider" data-slide-to="0" class="active"></li>
  <li data-target="#main-slider" data-slide-to="1"></li>
</ol>

CSS:

.item {

  position: relative;

  .details {

    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 25px;
    color: #fff;
    z-index: 2;
    align-items: flex-end;
    justify-content: center;

    h2 {
      margin-top: 0;
    }

  }

  &.item2 {

    .details {
      align-items: flex-start;
      justify-content: flex-start;      
    }

  }

}

.fix-flex {
  width: 100%;
}

.flex-row {
  display: flex;
  flex-flow: row nowrap;
}

还有更多CSS与代码相关，但与bootstrap有关。

Answer 1

您遇到的问题是由于您的 fix-flex class。它的宽度为 100%。它以 justify-content:center 为中心，但由于该元素与其容器的大小相同，因此在视觉上并不明显它正在工作。查看我的 codepen 分支。

Fork of your codepen

这应该被删除

.fix-flex {width:100%;}

Answer 2

阅读@paulie_D 的评论后，我意识到它与 fix-flex class 有关，它具有 width: 100%; 集的样式并包裹在我试图证明的内容因此它真的无法移动它。

Adrian Eufracio 的也指出了这一点；但是完全删除 div 会导致我试图阻止的问题；所以我不得不在代码中保留 div，但只需从样式中删除 width: 100%;，我现在可以证明内容的合理性并且文本不会换行。

CodePen: http://codepen.io/gutterboy/pen/jbeOrP

HTML:

<div id="main-slider" class="carousel">
  <div class="container">
    <div class="row">
      <div class="col-sm-offset-1 col-sm-10">
        <div class="carousel-inner" role="listbox">
          <div class="item item1 active">
            <img src="http://dreamatico.com/data_images/car/car-1.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>
          <div class="item item2">
            <img src="http://dreamatico.com/data_images/car/car-8.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
</div>

<ol class="carousel-indicators">
  <li data-target="#main-slider" data-slide-to="0" class="active"></li>
  <li data-target="#main-slider" data-slide-to="1"></li>
</ol>

CSS:

.item {

  position: relative;

  .details {

    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 25px;
    color: #fff;
    z-index: 2;
    align-items: flex-end;
    justify-content: center;

    h2 {
      margin-top: 0;
    }

  }

  &.item2 {

    .details {
      align-items: flex-start;
      justify-content: flex-start;      
    }

  }

}

.flex-row {
  display: flex;
  flex-flow: row nowrap;
}

Flex-box justify-content 不工作而 align-items 工作

Flex-box justify-content not working whilst align-items does

css

flexbox

twitter-bootstrap

twitter-bootstrap-3