Flex - это не то, что Flex - любое решение → justify-content: пространство между и полная гибкость вложенных элементов не сосуществуют

Question

Я думаю, что даже если мы посвятили 33% вложенному элементу flex и 67%, например, но если другой элемент недоступен, тогда обсуждаемый элемент занимает 100%, но смотрите здесь → нажмите здесь, даже если вы удалите эту часть →

<aside class="main-sidebar col">

основное содержание не занимает всю ширину. в чем дело?

Я попробовал одно лекарственное решение →

Я убираю ширину из

.flex-main и использовал flex:1 0 68.8%, но это тоже создало проблему. Это разрушено → .content{justify-content:space-between;}

Я считаю, что должно быть какое-то решение. Какие-либо предложения?

ФОН → Причина, по которой я выбираю flex, заключается в том, что это веб-сайт WordPress. В WordPress часто требуется, чтобы мы могли перевернуть два столбца, т.е. основную область содержимого и боковую панель, но когда мы используем жесткий CSS, как это →

margin-right: 20px;

сальто становится очень сложным, и это не так гладко.

Идея была перевернуть заказы, и, следовательно, перевернуть столбцы, т.е. order:1 следует изменить на order:2 и наоборот, пока это свойство .content{justify-content:space-between;} всегда обеспечивает разрыв между двумя столбцами. Это все имеет смысл?

вот кодекс →

Теперь просто измените ордера, и вы поймете, насколько легко и плавно переворачивать, просто изменив порядок, и пока мы делаем это, разрыв также сохраняется из-за этого → .content{justify-content:space-between;}

Все звучит нормально до сих пор? Есть смысл? мы на одной странице? Теперь попробуйте удалить →

`   <aside class="main-sidebar col">

    </aside>`

flex-main Это не проблема, и я уверен, что это будет нелегко.

ОБЪЯСНЕНИЕ ВИДЕО [В видео заполнение заказа опечатано, это фактически заполнение заказа.]

Answer 1

если удалить main-sidebar col, flex-main не расширяется, что является проблемой, и я уверен, что это не будет легко исправить это

Для этого есть очень простое решение. Если вы добавите .flex-main:only-child { flex: 1; } к вашим правилам CSS, это будет работать так, как вы хотите.

Итак, в основном, что происходит здесь, когда вы удаляете main-sidebar :only-child селектор сработает.

Обновленный кодекс

Вот 2 фрагмента, с тем же CSS, первый с .main-sidebar...

.content {
  display:flex;
  height: 100vh;
  justify-content:space-between;
}

.flex-main {
 width:68.8%;
 order:2;
  background: blue;
}
.flex-main:only-child {
  flex: 1;
}

.main-sidebar {
 /*background: #323232;*/
 background: #ffffff;
 width: 29%;
 color:black;
 order:1;
  background: yellow;

}

<div class="content">
    <div class="flex-main">
        <div class="main col">
        </div>        
    </div>
    <aside class="main-sidebar col">
      
    </aside>
</div>

... второй без .main-sidebar

.content {
  display:flex;
  height: 100vh;
  justify-content:space-between;
}

.flex-main {
 width:68.8%;
 order:2;
  background: blue;
}
.flex-main:only-child {
  flex: 1;
}

.main-sidebar {
 /*background: #323232;*/
 background: #ffffff;
 width: 29%;
 color:black;
 order:1;
  background: yellow;

}

<div class="content">
    <div class="flex-main">
        <div class="main col">
        </div>        
    </div>
</div>