フレックス部門内のフロート作業を取得する方法

Question

divをフロートして相互にインライン化させようとしています。コンテナdivにフレックスを適用してから、ブロック表示として機能することを好みます。 私はそれが私が間違っている小さなものだと確信しています。

.box { 
 
    text-align: center; 
 
    padding: 16px 16px 16px 16px; 
 
    margin: 0px 0px 0px 270px; 
 
    position: block; 
 
    min-height: 17em; 
 
    max-width: 1600px; 
 
    background-color: white; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.lilbox { 
 
    text-align: center; 
 
    display: inline; 
 
    margin: 5px; 
 
    padding 0px; 
 
    max-width: 31.7%; 
 
    max-height: 10%; 
 
    float: left; 
 
} 
 
.lilbox img { 
 
    max-width: 90%; 
 
    display: block; 
 
    margin: 10px; 
 
}

<div class="box" id="second"> 
 
    <div class="lilbox"> 
 
    <h2>Title</h2> 
 
    </br> 
 
    <img src="Images/img.png" alt="img"> 
 
    <p>Blah blah</p> 
 
    </div> 
 
    <div class="lilbox"> 
 
    <h2>Title</h2> 
 
    </br> 
 
    <p>Blah Blah</p> 
 
    </div> 
 
    <div class="lilbox"> 
 
    <h2>Title</h2> 
 
    </br> 
 
    <p>Blah Blah</p> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

Answer 1

だけ削除flex-direction: column

次に、あなたが望むように、あなたのコンテンツの整列にalign-itemsとjustify-contentで遊ん

.box { 
 
text-align: center; 
 
padding: 16px 16px 16px 16px; 
 
margin: 0px 0px 0px 270px; 
 
position: block; 
 
min-height: 17em; 
 
max-width: 1600px; 
 
background-color: white; 
 
display: flex; 
 

 
} 
 

 
.lilbox { 
 
text-align: center; 
 
display: inline; 
 
margin: 5px; 
 
padding 0px; 
 
max-width: 31.7%; 
 
max-height: 10%; 
 
float: left; 
 
} 
 

 
.lilbox img{ 
 
max-width: 90%; 
 
display: block; 
 
margin: 10px; 
 
}

<div class="box" id="second"> 
 
    <div class="lilbox"> 
 
     <h2>Title</h2> 
 
     </br><img src="Images/img.png" alt="img"> 
 
     <p>Blah blah</p> 
 
    </div> 
 
    <div class="lilbox"> 
 
     <h2>Title</h2> 
 
     </br> 
 
     <p>Blah Blah</p> 
 
    </div> 
 
    <div class="lilbox"> 
 
     <h2>Title</h2> 
 
     </br> 
 
     <p>Blah Blah</p> 
 
    </div> 
 

 
</div>