Как сохранить ширину элементов флексбокса независимо от их содержимого - PullRequest
Новая
       6

Как сохранить ширину элементов флексбокса независимо от их содержимого

0 голосов
/ 25 августа 2018

У меня есть макет flex box, состоящий из множества блоков div с различным количеством текста внутри.Есть ли способ сохранить одинаковую ширину этих блоков независимо от объема текста, который они содержат?Если текст не помещается внутри его поля, это прекрасно, если его можно прокручивать или просто обрезать.

Я знаю, что могу установить одинаковую минимальную и максимальную ширину, но я хочу иметь большие поля (в некоторой степени), если позволяет размер страницы, так что это не вариант.

Вы можете изменить размер моего примера и увидеть, что столбец, содержащий поле с большим количеством текста, имеет тенденцию становиться шире, чем остальные.Измените его размер, например, в узкий двухколонный макет.Как вы держите коробки на одинаковой ширине и при этом позволяете им расти и сжиматься?И со столбцом flex-direction.

Это просто упрощенная демонстрация части приложения, управляемого данными, я стремлюсь к как можно более общему решению.

Любая помощьвысоко ценится ... 

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

1 Ответ

0 голосов
/ 28 августа 2018

Вы можете поместить текст внутри тега textarea.Это даст гибким элементам одинаковую ширину независимо от того, содержат ли они текст или нет.Это не идеальное решение, так как вы не можете форматировать текст так свободно, как вы можете за пределами тега textarea, т.е. как в теге div, например, мне бы хотелось, чтобы у меня было объяснение, почему гибкие макеты ведут себя так по-разному (с текстовыми областями или без них),но у меня нет.По крайней мере, такое поведение одинаково в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...