Flexbox的對齊內容

Question

我有一個非常基本的結構，像這樣

<section id="portfolio"> 
    <div class="col-lg-5 col-sm-5 vertical-center" id="portfolio-left"> 
     <div id="portfolio-title"> 
      <h2>Work</h2> 
     </div> 
    </div> 

    <div class="col-lg-7 col-sm-7" id="portfolio-right"> 
     <div class="swiper-slide goldBG" id="cSlide2"> 
      <div class="col-md-6 col-md-offset-3 vertical-center" id="inner"> 
       <h3>Some title</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
        laboris nisi ut aliquip ex ea commodo consequat.</p> 
      </div> 
     </div>   
    </div> 
</section> 

它有一個左部和右部。現在，我想這部分中的內容，在中間成垂直排列，所以我用柔性首次

.vertical-center { 
    align-items: center; 
    display: flex; 
} 

這工作得很好，你可以從JSFiddle的問題我有看是正確的部分。您可以看到它正確地垂直對齊，但是內部的項目（h3和p）似乎是內嵌對齊的。

有什麼辦法可以讓這些項目顯示爲一個塊？我已經嘗試了一些這樣做的事情，但後來它弄亂了我的垂直對齊。

任何意見讚賞。

感謝

Answer 1

讓你inner div元素列flexbox：

#inner { 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: center; 
} 

請參見下面的演示：

#portfolio { 
 
    height: 100vh; 
 
} 
 
section#portfolio { 
 
    padding-bottom: 0; 
 
    padding-top: 0; 
 
} 
 
#portfolio-right { 
 
    height: 100%; 
 
    padding: 0; 
 
} 
 
#cSlide2 { 
 
    height: 350px !important; 
 
} 
 
#cSlide2 #inner { 
 
    height: 100%; 
 
} 
 
.vertical-center { 
 
    align-items: center; 
 
    display: flex; 
 
} 
 
#portfolio-right .goldBG { 
 
    background: #fabc2f; 
 
} 
 
#portfolio-left { 
 
    height: 100%; 
 
    background: #35a887; 
 
} 
 
#inner { 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
    justify-content: center; 
 
}

<section id="portfolio"> 
 
    <div class="col-lg-5 col-sm-5 vertical-center" id="portfolio-left"> 
 
    <div id="portfolio-title"> 
 
     <h2>Work</h2> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-lg-7 col-sm-7" id="portfolio-right"> 
 
    <div class="swiper-slide goldBG" id="cSlide2"> 
 
     <div class="col-md-6 col-md-offset-3 vertical-center" id="inner"> 
 
     <h3>Some title</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

把你的<h3> & <p>在父母<div>（在我的情況下它的.content-holder）。因爲它的屬性可以彎曲以內聯項目。

像：

<div class="content-holder"> 
    <h3>Some title</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 

您可以使用flex-direction: column太多，但這樣會讓每個內容換到下一行的，所以它能夠更好地包裝這些到父DIV。

看一看下面的代碼片段：

#portfolio { 
 
    height:100vh; 
 
} 
 

 
section#portfolio { 
 
    padding-bottom: 0; 
 
    padding-top: 0; 
 
} 
 

 
#portfolio-right { 
 
    height: 100%; 
 
    padding: 0; 
 
} 
 

 
#cSlide2 { 
 
    height:350px !important; 
 
} 
 

 
#cSlide2 #inner { 
 
    height:100%; 
 
} 
 

 
.vertical-center { 
 
    align-items: center; 
 
    display: flex; 
 
} 
 
#portfolio-right .goldBG { 
 
    background: #fabc2f; 
 
} 
 

 
#portfolio-left { 
 
    height:100%; 
 
    background: #35a887; 
 
}

<section id="portfolio"> 
 
    <div class="col-lg-5 col-sm-5 vertical-center" id="portfolio-left"> 
 
     <div id="portfolio-title"> 
 
      <h2>Work</h2> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-lg-7 col-sm-7" id="portfolio-right"> 
 
\t \t <div class="swiper-slide goldBG" id="cSlide2"> 
 
\t \t \t <div class="col-md-6 col-md-offset-3 vertical-center" id="inner"> 
 
       <div class="content-holder"> 
 
\t \t \t \t <h3>Some title</h3> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
 
\t \t \t \t \t ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
\t \t \t \t \t laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
       </div> 
 
\t \t \t </div> 
 
\t \t </div>   
 
    </div> 
 
</section>

希望這有助於！