css - flex换行后如何设置行距?(direction:row+warp:warp)
问题描述
效果图css.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>
问题解答
回答1:flex-container里加个align-content: space-around再给个固定高度
回答2:justify-content:space-between;flex-flow:row wrap;
相关文章:
1. 移动端页面文字垂直居中兼容性问题2. android - 新建项目卡在Gradle:Resolvedependencies’:app:_debugCompile’3. angular.js - Angular1使用bootstrap轮播条carousel不能自动轮播4. javascript - 关于在angularjs的select中遇到的问题!!5. python - 基于scrapy-redis的分布式爬虫运行的时候不能正常运行 遇到的问题如下截图所示6. atom编译器 如何格式化前端代码文件?7. javascript - 关于Js中 this的一道题8. Android Studio 中程序添加不上Xutils 3.0 jar包9. css3 - 我的css用less写的,eclipse的jsp文件要修改css很麻烦,怎么解决?10. angular.js - 焦虑!angular的ng-options的问题