的Flex-箱证明内容不工作，同时对齐项不

Question

我试图在文字周围移动与justify-content与柔性盒并同时align-items工程的内容垂直移动，justify-content不起作用移动内容水平。

我知道我可以使用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

阅读@ paulie_D的意见后，我意识到必须与fix-flex类有width: 100%;集的风格，围绕我的内容包裹做试图证明，因此它实际上无法移动它。

这也是由Adrian Eufracio的answer指出的;但是完全删除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; 
} 

Answer 2

您遇到的问题是由于您的fix-flex类。它的宽度为100％。它正在以justify-content：center为中心，但由于元素与其容器的大小相同，因此它在工作中并不明显。看看我的叉子。

Fork of your codepen

这应该被删除

.fix-flex {width:100%;}