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

问题描述

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

<form role> <p class='flex-container'><p class='flex-item'> <p class='form-group'><label class='control-label'>提交类型：</label><input type='text' placeholder='请输入内容'/> </p></p><p class='flex-item'> <label class='control-label'>主责部门：</label> <select 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 type='text' placeholder='请输入内容'/></p><p class='flex-item'> <p class='form-group'><label class='control-label'>指示编号： </label><input type='text' placeholder='请输入内容'/> </p></p><p class='flex-item'> <label class='control-label'>指示名称： </label> <input type='text' placeholder='请输入内容'/></p><p class='flex-item'> <label class='control-label'>指标类型：</label> <select id='select_orderstatus'><option value='-1'>全部</option><option value='0'>类型1</option><option value='1'>类型2</option> </select></p> </p></form>

问题解答

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

justify-content:space-between;flex-flow:row wrap;