我的flex布局如下:
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button type='button' onclick="add()" class="add">Add element</button>
<div class="flex-container">
<div class="flex-child">1</div>
<div class="flex-child">2</div>
<div class="flex-child">3</div>
<div class="flex-child">4</div>
<div class="flex-child">5</div>
<div class="flex-child">6</div>
<div class="flex-child">7</div>
<div class="flex-child">8</div>
<div class="flex-child">9</div>
<div class="flex-child">10</div>
<div class="flex-child">11</div>
<div class="flex-child">12</div>
<div class="flex-child">13</div>
<div class="flex-child">14</div>
<div class="flex-child">15</div>
<div class="flex-child">16</div>
<div class="flex-child">17</div>
<div class="flex-child">18</div>
<div class="flex-child">19</div>
<div class="flex-child">20</div>
</div>
</body>
.flex-container{
width: 500px;
background-color: lightgrey;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
align-content: flex-start;
}
.flex-child{
background-color: yellow;
width: 100px;
height: 100px;
margin: 10px;
}
.temp{
border: 1px dashed black;
}
var counter = 20;
function add(event){
counter++;
$('.flex-container')
.append("<div class='flex-child'>"+counter+"</div>")
}
$(document).ready(function(){
$('.flex-child').resizable({
grid: 120,
helper: "temp"
});
})
使用flexbox可以吗?如果是,请建议缺少位,如果不是,我应该使用什么来实现这种预期的行为? CSS网格布局(不成熟)或bootstrap网格? (需要在IE 10+上工作)