Как добиться одинаковой ширины гибких элементов с разными отступами слева и справа? - PullRequest
Новая
       7

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

0 голосов
/ 09 июля 2020

Я воссоздал свой сценарий в jsfiddle: https://jsfiddle.net/r1txcufw/15/

function showPixels() {
  var x = document.getElementsByClassName("col");
  for (i = 0; i < x.length; i++) {
    var node = document.createElement("DIV");
    var textnode = document.createTextNode(x[i].offsetWidth + ' px');
    node.appendChild(textnode);
    x[i].innerHTML = '';
    x[i].appendChild(node);
  }
}

window.onload = showPixels;
window.onresize = showPixels;
.row {
  display: flex;
}

.icon {
  padding: 1rem;
  background-color: red;
}

.col {
  background-color: lightgreen;
  flex-grow: 1;
  padding: 1rem;
}

.col div {
  background-color: white;
  font-weight: 600;
}

.no-left-padding {
  padding-left: 0 !important;
}
<div class='row'>
  <div class='icon'>
    A
  </div>
  <div class='col no-left-padding'>
    Our Widths
  </div>
  <div class='col'>
    Are different becasue of padding
  </div>
</div>

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

1 Ответ

0 голосов
/ 09 июля 2020

Сохраните заполнение и рассмотрите отрицательное значение margin-left для первого столбца: 

function showPixels() {
  var x = document.getElementsByClassName("col");
  for (i = 0; i < x.length; i++) {
    var node = document.createElement("DIV");
    var textnode = document.createTextNode(x[i].offsetWidth + ' px');
    node.appendChild(textnode);
    x[i].innerHTML = '';
    x[i].appendChild(node);
  }
}

window.onload = showPixels;
window.onresize = showPixels;
.row {
  display: flex;
}

.icon {
  padding: 1rem;
  background-color: red;
  z-index:1;
}

.col {
  background-color: lightgreen;
  flex-grow: 1;
  flex-basis:0;
  padding: 1rem;
}

.col div {
  background-color: white;
  font-weight: 600;
}

.no-left-padding {
  margin-left: -1rem !important;
}
<div class='row'>
  <div class='icon'>
    A
  </div>
  <div class='col no-left-padding'>
    Our Widths
  </div>
  <div class='col'>
    Are different becasue of padding
  </div>
</div>
...