Как убрать h1 из позиционирования flexbox?

Question

[Александр Дегтярев]

<div style="display:flex">
  <h1>Title</h1>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Как сделать чтобы h1 не подпадал под влияние flex системы?

Answer 1

[Дима Паутов]

Нет. Никак нельзя. Всё, что находится внутри flex элемента автоматически подпадает под его "влияние". Единственный способ решить эту задачу, обернуть все содержимое внутри в еще 1 див.

<div style="display:flex">
<div>
  <h1>Title</h1>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</div>

Answer 2

[Дмитрий]

Исключите его из этой системы. Не?) просто сделайте flex для дива, в который оберните те три

Comments

[Александр Дегтярев]

Мне нужно с минимальной вложенностью это сделать, можно ли это через css селектор not() сделать?

Answer 3

[Grigory S.]

<div>
  <h1>Title</h1>
  <div style="display:flex">
     <div>1</div>
     <div>2</div>
     <div>3</div>
  </div>
</div>

Comments

[Александр Дегтярев]

Хитрый какой, через css можно это сделать?

[Grigory S.]

Александр Дегтярев: не думаю

[Александр Дегтярев]

Grigory S.: жаль

[Александр Дегтярев]

Grigory S.: а селектор not() может помочь?

Answer 4

[Алексей Уколов]

h1 {
  flex-basis: 100%;
  width: 100%; // может сработать и без этого, но иногда приходится ставить ширину явно
}

Comments

[Александр Дегтярев]

а селектор nit() может сработать?

[Сергей delphinpro]

технически h1 останется во флекс-потоке =)

[Алексей Уколов]

Александр Дегтярев: может, но зачем?