React Frontend Developer

Question 1

Каковы преимущества использования CSS Grid и Flexbox ?

Accepted Answer

CSS Grid и Flexbox упрощают создание адаптивных и сложных раскладок. Grid подходит для построения двухмерных макетов, где нужно управлять как строками, так и столбцами, в то время как Flexbox идеально подходит для одномерных раскладок, таких как выравнивание элементов в строке. Оба инструмента позволяют легко управлять выравниванием, распределением пространства и адаптивностью.

Question 2

Как устроены Flexbox и его свойства?

Accepted Answer

Flexbox (Flexible Box Layout) предоставляет разработчикам возможность легко управлять расположением и выравниванием элементов внутри контейнера. Основные свойства Flexbox включают:

display: flex
flex-direction
justify-content
align-items
flex-wrap

Эти свойства позволяют контролировать направление, выравнивание и поведение элементов, делая их более адаптивными на разных экранах.

Question 3

Как работает flex-direction и как он влияет на justify-content и align-items?

Accepted Answer

flex-direction задает направление главной оси (row — горизонтально, column — вертикально).justify-content выравнивает элементы по главной оси.align-items выравнивает по поперечной оси.

Question 4

Какие задачи решает Grid, которые сложно реализовать на Flexbox?

Accepted Answer

Двумерные макеты: Сетки с строками и столбцами.Точное размещение: Элементы можно размещать в любых ячейках.Контроль пробелов: Управление промежутками (gap) между строками/столбцами.

Question 5

Как Flexbox управляет осями? Чем он лучше float?

Accepted Answer

Flexbox управляет осями через flex-direction (главная ось) и align-items/justify-content (выравнивание). Он лучше float, так как:Позволяет легко выравнивать элементы.Не ломает поток документа.Поддерживает адаптивность без хаков.

Question 6

Какие есть способы центрирования через flex?

Accepted Answer

Flexbox предоставляет несколько способов центрирования. Для центрирования по горизонтали используется свойство justify-content: center. Для центрирования по вертикали — align-items: center. Для точного центрирования по обеим осям одновременно применяют оба свойства на контейнере. Также можно использовать margin: auto на самом элементе.

Question 7

Какие значения по умолчанию у свойств flex-grow, flex-shrink и flex-basis?

Accepted Answer

По умолчанию flex-grow равен 0, flex-shrink равен 1, а flex-basis равен auto. Это означает, что flex-элементы не будут растягиваться, но могут сжиматься, а их начальный размер определяется содержимым или заданной шириной.

Question 8

Что делает свойство flex-basis?

Accepted Answer

Свойство flex-basis задает начальный размер flex-элемента вдоль главной оси до применения flex-grow и flex-shrink. Оно может быть задано в пикселях, процентах или ключевых словах, например auto. Если значение auto, размер берется из width или height элемента. Если задано конкретное значение, оно переопределяет width/height.

Question 9

Что делает свойство flex-grow?

Accepted Answer

Свойство flex-grow задает коэффициент увеличения flex-элемента относительно других элементов в контейнере. Если всем элементам задать flex-grow: 1, они займут равное пространство. Элемент с flex-grow: 2 будет в два раза больше, чем с flex-grow: 1. Значение по умолчанию — 0, элемент не растет.

Question 10

Как расположить несколько блочных элементов горизонтально с помощью CSS (flexbox/inline-block)?

Accepted Answer

Для горизонтального расположения блочных элементов можно использовать CSS Flexbox, задав родительскому контейнеру display: flex, или свойство inline-block, установив элементам display: inline-block. Flexbox более гибкий и удобный для адаптивных макетов, а inline-block подходит для простых случаев.

Вопросы React Frontend Developer