無法使用Flexbox的

Question

這裏是我的基本的HTML垂直對齊的div：

<div class="col-lg-12"> 
       <div class="col-lg-4 center-block main-text center-text marg-small boxed"> 
       <div class="random">Some Text</div> 
        <div class="col-lg-6 marg-small "> 
        <div id="pick_channel" class="boxed orange"> 
        <div class="square vertical">Channel</div> 
        </div> 
         <div id="pick_objective" class="boxed orange"> 
         <div class="square vertical">Objective</div> 
         </div> 
       </div> 
       </div> 
       </div> 

和相關的CSS：

.boxed{ 
display:flex; 
flex-direction: column; 
flex-wrap:nowrap; 
align-items: center; 
} 

.square { 
height:100px; 
width:100%; 
display:flex; 
align-self:center; 
margin-bottom: 10px; 
} 
.vertical{ 
} 

我試圖與id小號pick_channel和pick_objective爲矩形落得文字「Channel」和「Objective」以其各自的divs垂直和水平居中。我嘗試了一堆組合，但無法弄清楚。

Answer 1

事情是這樣的：

.boxed { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: nowrap; 
 
    align-items: center; 
 
} 
 
.square { 
 
    height: 100px; 
 
    width: 100px; 
 
    /* display: flex; */ 
 
    /* align-self: center; */ 
 
    margin-bottom: 10px; 
 
    border: 1px solid gray; 
 
    text-align: center; 
 
    line-height: 100px; 
 
}

<div class="col-lg-12"> 
 
    <div class="col-lg-4 center-block main-text center-text marg-small boxed"> 
 
    <div class="random">Some Text</div> 
 
    <div class="col-lg-6 marg-small "> 
 
     <div id="pick_channel" class="boxed orange"> 
 
     <div class="square vertical">Channel</div> 
 
     </div> 
 
     <div id="pick_objective" class="boxed orange"> 
 
     <div class="square vertical">Objective</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

在這裏你去

.boxed { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    align-items: center; 
 
    height: 100px; 
 
    width: 100%; 
 
    margin: 10px 0; 
 
} 
 
.square { 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.orange { 
 
    background: orange; 
 
} 
 
.center_content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    width: 100%; 
 
}

<div class="col-lg-4 center_content"> 
 
    <div class="col-lg-6 marg-small "> 
 
    <div id="pick_channel" class="boxed orange"> 
 
     <div class="square vertical">Channel</div> 
 
    </div> 
 
    <div id="pick_objective" class="boxed orange"> 
 
     <div class="square vertical">Objective</div> 
 
    </div> 
 
    </div> 
 
</div>