Вопрос о флексбоксах?

Question

[Alibek Kulseitov]

Недавно перешел на флекбоксы. А если быть точным 3 дня назад) Пришлось из-за надобности бутстрап 4 и sass.
В общем очень удобно но иногда временами я задумываюсь правильно ли я делаю например:

1) Скажем так какой-то флекс элемент должнен скрываться на мобильниках.
Если делать по методу mobile first правильно ли я делаю?

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div> <!-- Элемент который должен скрыться на мобильниках -->
</div>

.flex-item:nth-child(3) {
	display: none
}
@media (min-width: 567px) {
	.flex-item:nth-child(3) {
		display: block
	}
}

Правильно ли ему присваивать значение "block" ?? или нужно писать flex?

2) Например есть кнопка с текстом и внутри слева от текста какая-нибудь иконка. Думаю с таким часто сталкиваются все)
Иконку поставить слева от текста Без флексов можно было бы сделать через :before используя display: inline-block или через position: absolute.
А вот через флексы разумно ли кнопке задавать display: flex и там дальше поехало align-item: center и тд?

3) Почему-то мне кажется что флексы используются только для разметки как сетка. Или же я не прав?

Comments

[Ankhena]

1. Флекс-элемент, никому не обязан быть флексом. Но если он должен быть флексом, то флекс, если он был блоком, то блок. В зависимости о того, что у него внутри и вообще ваших целей. Главное, чтобы не было переопределений туда сюда. Посмотрите в инспекторе, чтобы все было хорошо.

2. Что вас/нас может остановить?

3. Используются всюду, где это удобно и разумно.

Answer 1

[Сергей delphinpro]

1) Mobile first это необязательно запросы только типа min-width.
Не стоит переопределять дважды стиль, когда можно написать media max-width display: none; Короче, мобайл ферст это круто, но без фанатизма.

2) display flex или display: inline-flex (для кнопки всё же логичнее второе). Вполне разумно. Что смущает-то?

3) Не прав.

Comments

[Alibek Kulseitov]

С Mobile First это просто пример был) таких случаев много бывает) Просто я так и не понял флекс элемент нужно выводить как display: block или flex

[Сергей delphinpro]

Алибек Кулсеитов, Зависит от от того, как у него должны вести себя потомки.

[Alibek Kulseitov]

Сергей, а если скрываемый элемент и есть потомок? То есть какое значение дисплей у потомка ?

[Сергей delphinpro]

Алибек Кулсеитов, повторяю — такое, какое нужно его потомкам. Если там не флекс, то block подойдёт.