垂直ここに私の基本的なHTMLですフレキシボックス

Question

を使用して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>