Как выровнять sub div внутри div по горизонтали

Question

Как показать все элементы внутри div по горизонтали с max-width?

<div style="width:350px">
    <div>a</div>
    <div>b</div>
    <div *ngIf="showC()">c</div>
</div>

Если предположить, что элемент c не виден, то это место не должно отображаться в блоке div.

Я пытался использовать max-width, но это не помогло. Если c div не виден, то div должен показывать только 2 элемента без лишних пробелов, так как c не виден

Answer 1

Вы можете добавить display: flex для родителя, чтобы встроить все его дочерние элементы и добавить width:100% ко всем дочерним элементам (см. Пример ниже)

isShown = false;
function toggleDiv() {
isShown = !isShown
if (isShown) {
 document.querySelector('#showHide').style.display = 'none';
} else {
document.querySelector('#showHide').style.display = 'unset';
}
}

.container {
  display: flex;
}

.container > div {
width: 100%;
  min-height: 100px;
  }
    .container > div:nth-child(1){
      background: lightgreen;
    }
    .container > div:nth-child(2){
      background: yellow;
    }
    .container > div:nth-child(3){
      background: orange;
    }

<div class="container">
      <div></div>
      <div id="showHide"></div>
      <div></div>
    </div>
    
    <button onclick="toggleDiv()">Toggle Div</button>

Когда вы переключаете div (Показать и скрыть), другие дочерние элементы получат доступную ширину