Не знам дали ще има и други публикации, че да се превърне това в рубрика, но ми хареса идеята да си поиграя с флекса в неделя сутрин. И така, искаме на направим заглавка, която има от ляво и от дясно линии до края на блока със съдържание и искаме да го направим с минимален брой елементи. С флексбокс става с точно един елемент. С помощта на двата псевдоелемента ще нарисуваме линиите, а флексбокс ни е нужен, за да подравним нещата. Тайната е в това, че ако флекс контейнера съдържа текст, около него се създава анонимен елемент, който да служи като флекс елемент, и така не ни е необходим допълнителен елемент около текста. Най-добре да ви покажа кода:

HTML:

<h1>Флекс в неделя сутрин</h1>

CSS:

h1 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

h1:before, h1:after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1px solid currentColor;
}

h1:before {
  margin-right: .5em;
}

h1:after {
  margin-left: .5em;
}

Резултата:

Флекс

Ако има нещо неясно, питайте!