css - 在flex容器中填充空的水平空间（css flexbox） - Thinbug

在flex容器中填充空的水平空间（css flexbox）

时间：2017-04-25 17:05:00

标签： css flexbox

我的flex布局如下：

HTML

<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>

CSS

.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;
}

JS

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"
  });
})

我想在第3列（从图像）

下面堆叠第4列和第5列

使用flexbox可以吗？如果是，请建议缺少位，如果不是，我应该使用什么来实现这种预期的行为？ CSS网格布局（不成熟）或bootstrap网格？（需要在IE 10+上工作）

0 个答案:

没有答案