フレックスボックスを使用してコンテンツを中央に並べて使用しないでください

Question

フレックスボックスを使用してコンテンツを中心にして、justify-content: centerを使用していますが、フレックスボックスではdivをサイドバイサイドに移動します。ここで

は例

.flex { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.content { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #000; 
 
    margin: 10px; 
 
}

<div class="flex"> 
 
    <div class="content"> 
 
    </div> 
 
    <div class="content"> 
 
    </div> 
 
</div>

他の位置決めの上にデフォルトのdiv要素を維持しながら、どのように私はフレキシボックスを使用することができます。

Answer 1

flex-direction: columnを設定し、align-items: centerを使用する必要があります。デフォルトのflex-directionはrowです。

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

 
.content { 
 
    width: 100px; 
 
    height 100px; 
 
    color: #000; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    margin: 5px; 
 
}

<div class="flex"> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
</div>

Answer 2

.flex { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.content { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #000; 
 
    margin: 10px; 
 
}

<div class="flex"> 
 
    <div class="content"> 
 
    </div> 
 
    <div class="content"> 
 
    </div> 
 
</div>

、次のコードを試してみてください