如何在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来根据需要调整内容

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;