列flexbox：包装到宽度限制，然后增长高度？-Java 学习之路

我想制作一个Flexbox，其中：

项目按列排列
只要所有项目都适合固定宽度，包装就会创建更多列 .
如果项目需要更多空间，则此后Flexbox会垂直增长，使用垂直滚动条而不是水平滚动条 .

有没有办法实现这个没有Javascript？

以下是正确的事情，直到有太多的项目，但它然后水平溢出而不是垂直溢出 .

<div style="height: 100%; width: 100%; overflow-y: auto;">
  <div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 100%; height: 100%; overflow-y: auto">
    <div style="width: 15em;"> a </div>
    <div style="width: 15em;"> b </div>
    <div style="width: 15em;"> c </div>
    <div style="width: 15em;"> d </div>
    <div style="width: 15em;"> e </div>
    <div style="width: 15em;"> f </div>
    <div style="width: 15em;"> g </div>
    <div style="width: 15em;"> h </div>
    <div style="width: 15em;"> i </div>
    <div style="width: 15em;"> j </div>
    <div style="width: 15em;"> k </div>
    <div style="width: 15em;"> l </div>
    <div style="width: 15em;"> m </div>
    <div style="width: 15em;"> n </div>
    <div style="width: 15em;"> o </div>
    <div style="width: 15em;"> p </div>
    <div style="width: 15em;"> q </div>
    <div style="width: 15em;"> r </div>
    <div style="width: 15em;"> s </div>
    <div style="width: 15em;"> t </div>
    <div style="width: 15em;"> u </div>
  </div>
</div>

1 回答

这是你想要实现的目标吗？

.grandParent {
  height: 100%;
  width: 100%;
}
.parent {
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  width: 100%; 
  height: 100%; 
}
.parent > div {
  min-height: 3em;
  flex-basis: 15em;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
  margin: 3px;
  border: 1px solid #eee;
  text-align: center;
}

<div class="grandParent">
      <div class="parent">
        <div> item 1</div>
        <div> item 2</div>
        <div> item 3</div>
        <div> item 4</div>
        <div> item 5</div>
        <div> item 6</div>
        <div> item 7</div>
        <div> item 8</div>
        <div> item 9</div>
        <div> item 10</div>
        <div> item 11</div>
        <div> item 12</div>
        <div> item 13</div>
        <div> item 14</div>
        <div> item 15</div>
        <div> item 16</div>
        <div> item 17</div>
        <div> item 18</div>
        <div> item 19</div>
        <div> item 20</div>
        <div> item 21</div>
        <div> item 22</div>
        <div> item 23</div>
        <div> item 24</div>
        <div> item 25</div>
        <div> item 26</div>
        <div> item 27</div>
        <div> item 28</div>
        <div> item 29</div>
        <div> item 30</div>
      </div>
    </div>

或这个？

.grandParent {
  height: 100%;
  width: 100%;
}
.parent {
  -webkit-column-width: 15em;
  -moz-column-width: 15em;
  column-width: 15em;
}
.parent > div {
  min-height: 3em;
  background-color: #eee;
  box-sizing: border-box;
  margin-bottom: 10px;
  border: 1px solid #eee;
  text-align: center;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}
h2 {
    -webkit-column-span: all;
    column-span: all;
}

<div class="grandParent">
  <div class="parent">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
    <div>item 9</div>
    <div>item 10</div>
    <div>item 11</div>
    <div>item 12</div>
    <h2>Some cool title</h2>
    <div>item 13</div>
    <div>item 14</div>
    <div>item 15</div>
    <div>item 16</div>
    <div>item 17</div>
    <div>item 18</div>
    <div>item 19</div>
    <div>item 20</div>
    <div>item 21</div>
    <div>item 22</div>
    <div>item 23</div>
    <div>item 24</div>
    <div>item 25</div>
    <div>item 26</div>
    <div>item 27</div>
    <div>item 28</div>
    <div>item 29</div>
    <div>item 30</div>
  </div>
</div>

回复于 2024-05-06T18:48:20+08:00

列flexbox：包装到宽度限制，然后增长高度？

1 回答

相关问题