没有内联的 Flexbox 容器适配内容答案

【问题标题】：Flexbox Container Fitting Content Without Inline没有内联的 Flexbox 容器适配内容
【发布时间】：2017-12-11 06:33:31
【问题描述】：

我有以下 jsfiddle：https://jsfiddle.net/CLight/5tm168uk/

如您所见，中间有很多浪费的空间。 如何在不破坏递归结构的情况下根据内容整齐地缩小容器？我尝试使用浮点数解决这个问题，但我被困了几个小时试图处理宽度。

编辑：澄清一下，我试图让它看起来像这样：

div {
  border: 1px solid;
}

.container {
  display: flex;
}

.box {
  flex: 1;
}

.left {
  text-align: left;
  padding-left: 20px;
}

.right {
  text-align: right;
  padding-right: 20px;
}

.recursive {
  padding: 0% 5%;
}

<div class="container">
  <div class="box left">
    2314
  </div>
  <div class="box right">
    55453
  </div>
</div>

<div class="container">
  <div class="box recursive">
    <div class="container">
      <div class="box left">
        3453535345353535
      </div>
      <div class="box right">
        3534535
      </div>
    </div>
    <div class="container">
      <div class="box recursive">
      <div class="container">
          <div class="box left">
            3453
          </div>
          <div class="box right">
            3
          </div>
          </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="box left">
    4535
  </div>
  <div class="box right">
    3
  </div>
</div>

【问题讨论】：

喜欢这个？ jsfiddle.net/5tm168uk/1
空白空间...不是您在CSS中设置的填充吗？ .recursive { padding: 0% 5%; }
感谢@IsmailFarooq 的回复，我添加了一张图片并进行了编辑以阐明我的意思。
允许改变结构吗？如果您的左侧和右侧在单独的容器中而不是在链接 atm 的行中，则它很容易制作。

标签： html css flexbox containers

【解决方案1】：

通常，内联包装器可以解决这些问题，其中项目的大小取决于其内容。

在这种情况下，使用列方向的内联弹性容器可以解决这个问题。

堆栈sn-p

.wrapper {
  display: inline-flex;
  flex-direction: column;
}

div {
  border: 1px solid black;
}

.container {
  display: flex
}

.box {
  flex: 1
}

.left {
  text-align: left;
  padding-left: 20px
}

.right {
  text-align: right;
  padding-right: 20px
}

.recursive {
  padding: 0 5vw
}

<div class="wrapper">
  <div class="container">
    <div class="box left">
      2314
    </div>
    <div class="box right">
      55453
    </div>
  </div>

  <div class="container">
    <div class="box recursive">
      <div class="container">
        <div class="box left">
          3453535345353535
        </div>
        <div class="box right">
          3534535
        </div>
      </div>
      <div class="container">
        <div class="box recursive">
          <div class="container">
            <div class="box left">
              3453
            </div>
            <div class="box right">
              3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="box left">
      4535
    </div>
    <div class="box right">
      3
    </div>
  </div>
</div>

为了平衡它，最小宽度可能会有所帮助。

堆栈sn-p

.wrapper {
  display: inline-flex;
  flex-direction: column;
  min-width: 450px;
}

div {
  border: 1px solid black;
}

.container {
  display: flex
}

.box {
  flex: 1
}

.left {
  text-align: left;
  padding-left: 20px
}

.right {
  text-align: right;
  padding-right: 20px
}

.recursive {
  padding: 0 5vw
}

<div class="wrapper">
  <div class="container">
    <div class="box left">
      2314
    </div>
    <div class="box right">
      55453
    </div>
  </div>

  <div class="container">
    <div class="box recursive">
      <div class="container">
        <div class="box left">
          3453535345353535
        </div>
        <div class="box right">
          3534535
        </div>
      </div>
      <div class="container">
        <div class="box recursive">
          <div class="container">
            <div class="box left">
              3453
            </div>
            <div class="box right">
              3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="box left">
      4535
    </div>
    <div class="box right">
      3
    </div>
  </div>
</div>

【讨论】：

感谢@LGSon 的回复。似乎如果一个数字足够长，它会与相邻的列重叠，而不是扩大容器。有没有办法解决这个问题？
@user5056973 我去看看。问题：内容的高度是否也可以不同，例如左/右内容之一可能是 2 行？
@user5056973 问题2：标记可以更改吗？
(1) 不幸的是，我不能有任何换行符。 (2) 只要有递归组件，就可以更改标记。谢谢@LGSon。
@user5056973 为什么推的时间越长越短，因为 Flexbox 项目不能像表格行/单元格一样工作，它们会集体增长。有 3 种方法可以完成您的要求... 1：使用 table （这可能很好，因为这似乎是表格数据）... 2：更改标记以及您不是从行开始的位置，而是开始有 2 列，一左一右... 3：保留现有解决方案并使用脚本获取最宽的项目并将其宽度用作最小宽度...那么您更喜欢哪一个？

【解决方案2】：

朋友看看。您需要为所有元素使用一个 div 包装，以便轻松处理。我在这里试过了

html,body {
  height: 100%;
  margin: 0;
}

.wrapper {
  height: 100%;
  display: flex;
  width: 100%;
}

div {
  border: 1px solid black;

}

.container{
  display:flex;
  width: 100%;
  height: 33.333%;
}

.box{
  flex:1
}

.left{
  text-align: left;
  padding-left: 20px
}

.right{
  text-align: right;
  padding-right: 20px
}


.recursive{
  padding: 0% 5%
}

<div class="wrapper">
  <div class="container">
    <div class="box left">
      2314
    </div>
    <div class="box right">
      55453
    </div>
  </div>

  <div class="container">
    <div class="box recursive">
      <div class="container">
        <div class="box left">
          3453535345353535
        </div>
        <div class="box right">
          3534535
        </div>
      </div>
      <div class="container">
        <div class="box recursive">
        <div class="container">
            <div class="box left">
              3453
            </div>
            <div class="box right">
              3
            </div>
            </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="box left">
      4535
    </div>
    <div class="box right">
      3
    </div>
  </div>
</div>

fiddle

【讨论】：

【解决方案3】：

使用引导程序：

css:

 div {
      border: 1px solid black;
      margin: auto;
    }

HTML：

 <div class="row">
  <div class=" col-md-6">
    2314
  </div>
  <div class="col-md-6">
    55453
  </div>
  <div class="col-md-10">
    <div class="row">
      <div class="col-md-6">
        3453535345353535
      </div>
      <div class="col-md-6">
        3534535
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        3453
      </div>
      <div class="col-md-6">
        3
      </div>
    </div>
  </div>

  <div class="col-md-6">
    4535
  </div>
  <div class="col-md-6">
    3
  </div>
</div>

https://jsfiddle.net/5tm168uk/8/

【讨论】：