AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

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

Недавно перешел на флекбоксы. А если быть точным 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) Почему-то мне кажется что флексы используются только для разметки как сетка. Или же я не прав?
  • Вопрос задан
  • 146 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
1) Mobile first это необязательно запросы только типа min-width.
Не стоит переопределять дважды стиль, когда можно написать media max-width display: none; Короче, мобайл ферст это круто, но без фанатизма.

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

3) Не прав.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы