Question

我尝试使用带有弹性框的justify-content移动文字，而align-items用于垂直移动内容，justify-content不会＆＃ 39;工作以水平移动内容。

我知道我可以使用text-align，但我不喜欢它如何将所有文本移动到最右边，包括子标题文本，我想在同一个地方开始标题确实 - 我相信这将是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类。它的宽度为100％。它以justify-content：center为中心，但由于元素与容器的大小相同，因此它在视觉上并不明显。看看你的代码栈。

Fork of your codepen

应该删除

.fix-flex {width:100%;}

Answer 2

在阅读@ paulie_D的评论后，我意识到这与fix-flex类有关，width: 100%;类的风格设置为width: 100%;，并且包含了我试图证明的内容，因此它真的无法移动它。

Adrian Eufracio的answer也指出了这一点;然而，完全删除div将导致我试图阻止的问题;所以我不得不在代码中保留div，只是从样式中删除<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>，我现在可以证明内容的合理性，而文本也不会包装。

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

<强> HTML：

.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;
}

<强> CSS：

textView.setText("Your text from edittext");

Flex-box证明 - 内容在对齐项目时不起作用

2 个答案: