Question

是否可以在固定大小的父元素内制作一系列固定宽高比（16/9）框尽可能大？子框的数量因动态生成而有所不同。

我正在考虑使用flex-box，但不知道如何根据父级的维度或子元素的数量来强制休息。

纯CSS解决方案会很好，但使用JavaScript也是一种选择。

5盒示例：

----------------
|    |    |    |
----------------
|    |    |
-----------

或水平父元素中的11个框（宽度>高度）：

-------------------------
|   |   |   |   |   |   |
-------------------------
|   |   |   |   |   |
---------------------

或几乎为方形父元素的11个框：

-----------------
|   |   |   |   |
-----------------
|   |   |   |   |
-----------------
|   |   |   |
-------------

Answer 1

你是说这个意思吗？您需要的只是容器中的flex-flow: row wrap;，如此。

＆＃13;

.container {
  background: #f68a37;
  display: flex;
  flex-flow: row wrap;
  width: 240px;
}
.box {
  height: 50px;
  width: 50px;
  margin: 5px;
  background: #8af637;
}
.container[large] {
  width: 480px;
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<br />
<div large class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<br />
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<br />
<div large class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

Answer 2

我认为这就是你要找的东西。

HTML

<div class="main-wrapper">
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
  <div class="wrapper">
    <div class="main">
    </div>
  </div>
</div>

CSS

.main-wrapper {
  width: 100vw;//making it full screen, or you can also use fixed size here
  background #fff;
}
.wrapper {
  width: 20%; // 100/the number of children you want, in the case 5
  display: inline-block;
  position: relative;
  float:left;
  border: 1px solid #fff; // just for showing the boxes
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue; //just for demonstrating
  color: white;
}

小提琴https://jsfiddle.net/e34a5gbx/1/

制作一系列尽可能大的框，由父母约束

2 个答案: