flexbox列拉伸以适合内容 [英] flexbox column stretch to fit content

问题描述

Goodday同伴开发人员，

Goodday fellow developers,

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

I would like to create a container that allows content to go from top to bottom and left to right. The parent container needs to stretch to fit but within maximum defined values.

我为此目的使用了flexbox，但是我没有让父容器进行拉伸以适合它.没有人有任何建议，而不必用JavaScript来计算宽度吗?

I have used flexbox for this purpose, however I do not get the parent container to stretch to fit. Does anyone have any suggestions, without having to hack my way with javascript to calculate the width?

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

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

推荐答案

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

Did you really need the outer inline container? I would suggest this approach:

.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列拉伸以适合内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！