Question

我有一个弹性框布局，其中包含许多div块，其中包含各种文本。有什么方法可以使这些块的宽度保持相同，而不管它们包含的文本量如何？如果文本不能放入其框内，则可以滚动或剪切就可以了。

我知道我可以将min-width和max-width设置为相同，但是如果页面大小允许，我想（在某种程度上）有更大的盒子，所以这不是一个选择。

您可以调整我的示例的大小，然后看到包含很多文本的框所在的列往往比其余的列宽。调整大小，例如缩小到两栏式布局。您如何保持盒子的宽度相等，又如何使它们成长和收缩？并带有弹性方向列。

这只是数据驱动应用程序一部分的简化演示，我的目标是寻求一种尽可能通用的解决方案。

非常感谢任何帮助…

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Flextest</title>

   <style>
      body
      {
      }

      .wrapper
      {
         background-color: #eee;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
         border: 2px solid green;
      }

      .el
      {
         border: 2px solid black;
         color: darkgray;
         padding: 10px;
         flex-grow: 1;
         flex-shrink: 1;
         margin: 1vh;

         min-width: 100px;
         max-width: 300px;
         min-height: 200px;
         max-height: 200px;
      }
   </style>

   <script>
      function init()
      {
         window.addEventListener("resize", function (evt) { onresize(evt); }, false);
         onresize(null);
      }

      function onresize(evt)
      {
         var height = Number(document.body.parentNode.clientHeight);
         document.getElementById("size").innerText = height;
         document.getElementById("wrapper").style.height = (height - 20) + "px";
      }

   </script>

</head>
<body onload="init()">

      <div class="wrapper" id="wrapper">
         <div class="el" id="size">One</div>
         <div class="el">Two</div>
         <div class="el">Three</div>
         <div class="el">Four</div>
         <div class="el">Lots of text text text text text text text text text text<br />text text<br />text text text text text text text text text text text </div>
         <div class="el">Six</div>
         <div class="el">Seven</div>
         <div class="el">Eight</div>
      </div>

   </body>
</html>

Answer 1

您可以将文本放在textarea标签内。这将使flex项目具有相同的宽度，无论它们是否包含任何文本。这不是理想的解决方案，因为您无法在textarea标签之外（例如在div标签中）自由地格式化文本。我希望我能解释一下为什么flex布局的行为如此不同（有或没有textareas），但我没有。至少在Edge，Chrome和Firefox中，行为是一致的。

使用这种flexbox布局的好处是，它可以很好地适应不同的纵横比，例如平板电脑上的纵向/横向，同时可以固定以响应不同数量的文本内容。是数据库驱动形式的理想选择，例如，其中某些字段/文本区域可能为空，而某些则不是。

这个例子当然只是草图或概念证明，在典型的数据库驱动形式下，您可能会有一些文本输入字段/标签以及不同高度的图像元素。

这是想要将其与原始代码进行比较的任何人的代码。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Flextest</title>

   <style>
      body
      {
      }

      .wrapper
      {
         background-color: #eee;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
         border: 2px solid green;
      }

      .el
      {
         border: 2px solid black;
         color: darkgray;
         padding: 10px;
         flex-grow: 1;
         flex-shrink: 1;
         margin: 1vh;

         min-width: 100px;
         max-width: 300px;
         min-height: 200px;
         max-height: 200px;
      }

      textarea
      {
         width: calc(100% - 6px);
         /*height: calc(100% - 6px);*/
         height: 194px; /*Calculated height doesn't work in chrome */
      }
   </style>

   <script>
      function init()
      {
         window.addEventListener("resize", function (evt) { onresize(evt); }, false);
         onresize(null);
      }

      function onresize(evt)
      {
         var height = Number(document.body.parentNode.clientHeight);
         document.getElementById("size").innerText = height;
         document.getElementById("wrapper").style.height = (height - 20) + "px";
      }

   </script>

</head>
<body onload="init()">

   <div class="wrapper" id="wrapper">
      <div class="el"><textarea id="size">One</textarea></div>
      <div class="el"><textarea>Two</textarea></div>

      <div class="el"><textarea>Three</textarea></div>
      <div class="el"><textarea>Four</textarea></div>
      <div class="el"><textarea>Lots of text text text text text text text text text text<br />text text<br />text text text text text text text text text text text</textarea></div>
      <div class="el"><textarea>Six</textarea></div>
      <div class="el"><textarea>Seven</textarea></div>
      <div class="el"><textarea>Eight</textarea></div>
   </div>

   </body>
</html>

如何使弹性框项目的宽度不受其内容的影响

1 个答案: