效果图
css
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
width: 33%;
}
html
<form class="form-inline" role>
<p class="flex-container">
<p class="flex-item">
<p class="form-group">
<label class="control-label">提交类型:</label>
<input class="form-control" type="text" placeholder="请输入内容"/>
</p>
</p>
<p class="flex-item">
<label class="control-label">主责部门:</label>
<select class="form-control" style="width: 150px;height: 33px;" id="select_orderstatus">
<option value="-1">全部</option>
<option value="0">行政部</option>
<option value="1">IT部</option>
</select>
</p>
<p class="flex-item">
<label class="control-label">岗位:</label>
<input class="form-control" type="text" placeholder="请输入内容"/>
</p>
<p class="flex-item">
<p class="form-group">
<label class="control-label">指示编号: </label>
<input class="form-control" type="text" placeholder="请输入内容"/>
</p>
</p>
<p class="flex-item">
<label class="control-label">指示名称: </label>
<input class="form-control" type="text" placeholder="请输入内容"/>
</p>
<p class="flex-item">
<label class="control-label">指标类型:</label>
<select class="form-control" style="width: 150px;height: 33px;" id="select_orderstatus">
<option value="-1">全部</option>
<option value="0">类型1</option>
<option value="1">类型2</option>
</select>
</p>
</p>
</form>
Ajoutez align-content: space-around
au flex-container et donnez-lui une hauteur fixe
justify-content:space-between;flex-flow:row wrap;