如何获得浮动工作，在flex div内

Question

只是试图浮动我的div让他们互相内联。由于将flex应用于容器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>