Question

Goodday开发者，

我想创建一个容器，允许内容从上到下，从左到右。父容器需要拉伸以适合但在最大定义值内。

我已经将flexbox用于此目的，但是我没有让父容器伸展以适应。有没有人有任何建议，而不必用javascript来计算宽度？

＆＃13;

.flex-container {
  display: inline-flex;
  background-color: #ccc;
}

.flex-container-content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 300px;
  max-width: 1000px;
  background-color: #333;
}


.flex-container-content > div {
  background-color: #EB213C;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

＆＃13;

<div class="flex-container">
  <div class="flex-container-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
    <div>12</div> 
  </div>
</div>

＆＃13;

Answer 1

您真的需要外部内联容器吗？我会建议这种方法：

.flex-container {
  display: flex;
  background-color: #ccc;
}

.flex-container-content{
  display: flex;    
  flex-flow: column wrap;
 
  max-height: 300px;
  max-width: 1000px;      
  background-color: #333;
}

.flex-container-content > div {
  background-color: #EB213C;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<!-- <div class="flex-container"> -->
  <div class="flex-container-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
    <div>12</div> 
  </div>
<!-- </div> -->

flexbox列拉伸以适合内容

1 个答案: