it-swarm.com.ru

Компоновка гибкой коробки похожа на стол?

Я работаю с собственной структурой, которая зависит от определенной структуры нашего HTML. И одна из хитростей заключается в том, что каждой строке нужен свой собственный контейнер со своими классами и атрибутами данных.

Так вот в чем проблема. Без кардинального изменения DOM, как сделать так, чтобы отображаемая ниже гибкая панель отображалась так же, как HTML-таблица? Или стол единственный? Решение должно работать как в IE11, так и в Chrome.

Я пытаюсь сделать так, чтобы это выглядело так ...

Column A      |      Column B      |      Column C
1             |      2             |      3

section {
  display: flex;
  flex-wrap: wrap;
}

section .col {
  flex: 1 1 auto;
}

section .line-break {
  flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}
<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="line-break"></div>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

5
Steve Wortham

Если контент, который вы собираетесь представить, имеет тип tabular data, то CSS Table - правильный путь.

Поскольку это можно сделать с помощью CSS, вы можете легко переключаться между любым типом отображения, таким как flex, block и т.д., Или даже float, с использованием медиазапроса и т.д.

Я также удалил элемент <div class="line-break"></div>, так как он вам не нужен, хотя, если он отображается компонентом или подобным, оставление его как есть не вызовет никаких проблем.


Если вам все еще нужно или нужно использовать Flexbox, в этом моем ответе упоминается разница между таблицей CSS и Flexbox по двум важным функциям:


Обновлено, пример, показывающий некоторые полезные вещи Flexbox, с различными столбцами ширины и диапазона.

Фрагмент стека - демонстрационная версия Flexbox ( Fiddle для IE11 )

.tbl {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  min-height: 50px;
}
.cell {
  flex: 4;
  border: 1px solid red;
}
.cell:nth-child(1) {
  flex: 1;
}
.cell:nth-child(2) {
  flex: 2;
}
.cell.span4-5 {
  flex: 8 24px;                    /*  col 4,5 flex-grow/border/padding  */
}
.cell.span3-4 {
  flex: 8 24px;                    /*  col 3,4 flex-grow/border/padding  */
}
.cell.span3-5 {
  flex: 12 36px;                   /*  col 3,4,5 flex-grow/border/padding  */
}
.row:first-child .cell {
  display: flex;
  justify-content: center;         /*  center horiz. */
  align-items: center;             /*  center vert. */
}
.row .cell {
  padding: 5px;
  box-sizing: border-box;
}
<div class="tbl">
  <div class="row">
    <div class="cell">ID </div>
    <div class="cell">Nr </div>
    <div class="cell">Header 1 </div>
    <div class="cell span4-5"> Header 2 </div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
  </div>
  <div class="row">
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell span3-5">Content</div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell span3-4">Content</div>
    <div class="cell">Content</div>
  </div>
</div>


Фрагмент стека - таблица CSS

section {
  display: table;
  width: 100%;
}

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}
<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

7
LGSon

header, .row {
  display: flex;  /* aligns all child elements (flex items) in a row */
}

.col {
  flex: 1;        /* distributes space on the line equally among items */
}
<section>
  <header>
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </header>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</section>

0
Michael_B