Уровень 7. Расположение элементов

Настало время поговорить о том, что означают загадочные свойства flex, justifyContent и alignItems

  {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  }

flex - отвечает за то, какую часть экрана займет компонент. В данном случае он растягивается на весь экран.

justifyContent: 'center'- выравнивает элементы,  которые содержатся внутри этого компонента, по центру по вертикали. Еще есть такие значения:  'flex-start', 'flex-end', 'space-between', 'space-around'

alignItems: 'center' - так же выравнивает элементы по центру, но по горизонтали.

Про то, какие есть еще варианты расположения можно почитать вот здесь. 

Ниже в коде я закомментировала эти строчки поставив перед ними //

• попробуйте раскомментировать (убрать//) эти строчки по очереди
• поставьте вместо 'center' другие возможные значения

• повторите вот так:

____________________________________________________________________________________

*Дополнительные свойства у стилей

Чтобы подвинуть немного элементы относительно друг друга, есть свойства margin и padding.

• раскомментируйте строчки, где они используются
• попробуйте поменять значения

margin отвечает за то, чтобы отодвинуть элемент от других элементов. padding - чтобы отодвинуть элементы, содержащиеся внутри компонента, от его "стенок/краев".

Так же есть marginLeft, marginBottom и похожие, отодвигающие элемент только с одной стороны, когда же margin отодвигает элемент от всех сторон на одинаковое расстояние. Еще есть  marginHorizontal, marginVertical. Попробуйте :)

Для padding тоже есть paddingLeft и т.д.

Посмотреть какие еще есть похожие свойства, можно тут

_____________________________________________________________________________________

Перейти на следующий уровень