Равный размер для произвольных уровней вложенных дочерних элементов гибкости - PullRequest
Новая
       4

Равный размер для произвольных уровней вложенных дочерних элементов гибкости

0 голосов
/ 19 июня 2020

По сути, я хочу, чтобы 1, 2 и 3 были одинаковой ширины, и аналогично, если 4, 5, 6 и т.д. c. были добавлены динамически во время выполнения. Можно ли с чистым CSS? 

x = 4;

$("button").on("click", () => {
  $(".active").removeClass("active").append(`
    <div class="flex active">
      <div>
        ${x++}
      </div>
    </div>
  `);
});
.flex {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  border-left: solid 1px #000;
}

div {
  flex: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">
  <div>
    1
  </div>
  <div class="flex">
    <div>
      2
    </div>
    <div class="flex active">
      <div>
        3
      </div>
    </div>
  </div>
</div>
<button>add</button>

Ответы [ 2 ]

1 голос
/ 19 июня 2020

Вы можете использовать display:contents для уменьшения уровня вложенности: 

x = 4;

$("button").on("click", () => {
  $(".active").removeClass("active").append(`
    <div class="flex active">
      <div>
        ${x++}
      </div>
    </div>
  `);
});
.flex {
  display: flex;
  flex-direction: row;
}

.flex .flex {
  display:contents;
}

div {
  flex: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">
  <div>
    1
  </div>
  <div class="flex">
    <div>
      2
    </div>
    <div class="flex active">
      <div>
        3
      </div>
    </div>
  </div>
</div>
<button>add</button>
0 голосов
/ 19 июня 2020

Вы можете играть с css столбцами сетки: 

#a {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#a {
  background-color: #f77;
}

#b {
  background-color: #7f7;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column: 2 span;
}

#c {
  background-color: #77f;
}
<div id="a">
  <div class="first">
    1
  </div>
  <div id="b">
    <div>
      2
    </div>
    <div id="c">
      <div>
        3
      </div>
    </div>
  </div>
</div>
...