如何让浮动工作，在 flex div 内答案

【问题标题】：How to get float working, inside a flex div如何让浮动工作，在 flex div 内
【发布时间】：2017-02-15 11:21:07
【问题描述】：

只是试图浮动我的 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>

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：

一年半之后——这就是我需要的答案！谢谢！