flex-wrap: nowrap со строкой и столбцом - PullRequest
Новая
       23

flex-wrap: nowrap со строкой и столбцом

0 голосов
/ 10 мая 2019

У меня есть гибкий контейнер с потоком nowrap, некоторые элементы могут начинаться как столбцы, как я могу ими управлять?Это как макет дерева.Окончательный результат может выглядеть следующим образом: enter image description here

Вот stackblitz и фрагмент: 

.container{
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  padding: 5px;
  border:2px solid gray;
}

.item{
  width: 150px;
  flex:1 1 150px;
  border: 1px solid green;
  margin-right: 2px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Я могу придумать макет сетки CSS, чтобы сделать этот макет легко:

  • используйте grid-auto-flow: column, чтобы элементы располагались в направлении столбца,

  • используйте grid-row и grid-column для конкретных item элементов для достижения требуемой конфигурации.

См. Демо ниже: 

.container{
  display: inline-grid; /* inline grid container */
  grid-auto-flow: column; /* items placed vertically */
  padding: 5px;
  border: 2px solid gray;
}

.item:nth-child(2) {
  grid-row: 1;
}
.item:nth-child(4),
.item:nth-child(5) {
  grid-row: 2;
}

.item:last-child {
  grid-row: 4;
}

.item{
  width: 150px;
  border: 1px solid green;
  margin-right: 2px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
0 голосов
/ 10 мая 2019

Вы можете сделать это, используя таблицы. 

<table>
  <tr>
    <td class="item">1</td>
    <td class="item">2</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td class="item">3</td>
    <td class="item">4</td>
    <td class="item">5</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td class="item">6</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td class="item">7</td>
    <td class="item">8</td>
  </tr>
</table>
...