搜尋

首頁  >  問答  >  主體

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>
    <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>
学习ing学习ing2754 天前2792

全部回覆(2)我來回復

  • 漂亮男人

    漂亮男人2017-06-10 09:50:51

    flex-container裡加個align-content: space-around
    再給個固定高度

    回覆
    0
  • 扔个三星炸死你

    扔个三星炸死你2017-06-10 09:50:51

    justify-content:空間之間;flex-flow:行換行;

    回覆
    0
  • 取消回覆