css - flex换行后如何设置行距？（direction:row+warp:warp）

问题描述

问 题

效果图

css

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-item {
    width: 33%;
}

html

<form class="form-inline" role>
    <div class="flex-container">
        <div class="flex-item">
            <div class="form-group">
                <label class="control-label">提交类型：</label>
                <input class="form-control" type="text" placeholder="请输入内容"/>
            </div>
        </div>
        <div 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>
        </div>
        <div class="flex-item">
            <label class="control-label">岗位：</label>
            <input class="form-control" type="text" placeholder="请输入内容"/>
        </div>
        <div class="flex-item">
            <div class="form-group">
                <label class="control-label">指示编号：    </label>
                <input class="form-control" type="text" placeholder="请输入内容"/>
            </div>
        </div>
        <div class="flex-item">
            <label class="control-label">指示名称：    </label>
            <input class="form-control" type="text" placeholder="请输入内容"/>
        </div>
        <div 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>
        </div>
    </div>
</form>

解决方案

flex-container里加个align-content: space-around
再给个固定高度

这篇关于css - flex换行后如何设置行距？（direction:row+warp:warp）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！