Почему justify-content: space-between не работает?
Расскажу, как научится самому разбираться с такими вопросами.
Если не умеете пользоваться инструментами разработчика, то просто обводите блоки цветными рамочками.
И сразу увидите, что нет никакого space, чтобы сработал space-between, да и любое другое выравнивание.
Решения вопроса 0
Ответы на вопрос 2
Линуксоид-энтузиаст и SQL разработчик
Если я правильно понял, то вы не указали размеры .nav , пропишите ему width:100%
Ответ написан 05 февр.
Комментировать
Нравится Комментировать
Myakish999 @Myakish999
Попробуйте добавить следующий код:
*::after, *::before content: none;
>
У меня был такой глюк. Если установлен content: »; , то space-between у меня работал почти как space-around — крайние элементы не прижимались к краям.
И не слушайте всяких умников, советующих почитать чего-нибудь. Они, как правило, бездари.
p.s. не забудьте удостовериться, что правило заработало. :))
Ответ написан 07 мар.
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +2 ещё
Как реализовать код, чтобы при нажатии на кнопку два блока менялись друг с другом местами, то есть изменять их order?
- 1 подписчик
- 6 минут назад
- 2 просмотра
Почему не работает justify-content: center;?
Работает. А кнопка горизонтально не по центру, потому что соответствующее центрирование не задано. Потому что justify-content распределяет содержимое блока вдоль главной оси, в качестве которой у вас установлена вертикальная ( flex-direction: column ).
Ответ написан более двух лет назад
Нравится 1 1 комментарий
Свойство justify-content
Сейчас ось направлена слева направо (это делает flex-direction: row), а блоки прижаты к левой стороне:
#parent < display: flex; justify-content: flex-start; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение flex-end
В данном примере ось также направлена слева направо, но блоки прижаты к правой стороне, так как задано justify-content в значении flex-end :
#parent < display: flex; justify-content: flex-end; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение center
Сейчас блоки будут стоять по центру независимо от направления главной оси:
#parent < display: flex; justify-content: center; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение space-between
Блоки распределены вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу:
#parent < display: flex; justify-content: space-between; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение space-around
Блоки распределены вдоль главной оси, при этом между первым блоком и началом оси, последним блоком и концом оси такой же промежуток, как и между остальными блоками. Однако, промежутки суммируются и между двумя блоками расстояние в два раза больше, чем между блоком и началом/концом оси:
#parent < display: flex; justify-content: space-around; flex-direction: row; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение center. Ось вниз
Сменим направление главной оси, задав flex-direction в значении column :
#parent < display: flex; justify-content: center; flex-direction: column; height: 400px; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение space-between. Ось вниз
Сейчас блоки распределятся равномерно по вертикали:
#parent < display: flex; justify-content: space-between; flex-direction: column; height: 400px; border: 1px solid #696989; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Выравнивание по началу горизонтальной оси (строки) в гриде
Давайте установим выравнивание для наших элементов по началу горизонтальной оси:
#parent < display: grid; justify-content: start; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; >#parent > div < gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; >
Пример . Выравнивание по центру горизонтальной оси в гриде
А теперь установим выравнивание для наших элементов по центру горизонтальной оси:
#parent < display: grid; justify-content: center; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; >#parent > div < gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; >
Пример . Выравнивание по концу горизонтальной оси в гриде
Давайте установим выравнивание для наших элементов по концу горизонтальной оси:
#parent < display: grid; justify-content: end; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; >#parent > div < gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; >
Смотрите также
- свойство flex-direction ,
которое задает направление осей flex блоков - свойство justify-content ,
которое задает выравнивание по главной оси - свойство align-items ,
которое задает выравнивание по поперечной оси - свойство flex-wrap ,
которое многострочность flex блоков - свойство flex-flow ,
сокращение для flex-direction и flex-wrap - свойство order ,
которое задает порядок flex блоков - свойство align-self ,
которое задает выравнивание одного блока - свойство flex-basis ,
которое задает размер конкретного flex блока - свойство flex-grow ,
которое задает жадность flex блоков - свойство flex-shrink ,
которое задает сжимаемость flex блоков - свойство flex ,
сокращение для flex-grow, flex-shrink и flex-basis
Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
Задавались когда-нибудь вопросом, как работает CSS Flexbox? Наглядно объясняем возможности технологии с использованием анимации.
CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии пишут здесь. Мы же решили объяснить возможности CSS Flexbox с использованием гифок — настоящая flex шпаргалка.
Разберёмся, как работает display flex CSS. Есть страница:На ней размещено 4 div разных размеров, которые находятся внутри серого div . У каждого div есть свойство display: block . Поэтому каждый блок занимает всю ширину строки. И вот как реализовать CSS display flex. Чтобы начать работать с CSS Flexbox, нужно сделать контейнер flex контейнером. Делается это так:
#container
Так у блоков появилось свойство flex-контекст, которое в дальнейшем позволит ими управлять гораздо проще, чем с использованием стандартного CSS.
17 нововведений jQuery 3 и советы по их использованию
flex-direction
У flex-контейнера есть две оси: главная и перпендикулярная ей.По умолчанию все предметы располагаются вдоль главной оси — слева направо. Именно поэтому блоки в предыдущем примере выстроились в линию, когда мы применили display: flex . А вот flex-direction позволяет вращать главную ось.
#container
Обратите внимание, что flex-direction: column не выравнивает блоки по оси, перпендикулярной главной. Главная ось сама меняет своё расположение, и теперь направлена сверху вниз.Есть ещё парочка свойств для flex-direction : row-reverse и column-reverse .
justify-content
Отвечает за выравнивание элементов по главной оси:
#container
Justify-content может принимать 5 значений:
Space-between задаёт одинаковое расстояние между блоками, но не между контейнером и блоками. Space-around также задаёт одинаковое расстояние между блоками, но теперь расстояние между контейнером и блоками равно половине расстояния между блоками.
align-items
Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси. Вернёмся к flex-direction: row и пройдёмся по командам align-items :
Стоит заметить, что для align-items: stretch высота блоков должна быть равна auto . Для align-items: baseline теги параграфа убирать не нужно, иначе получится так:
Чтобы получше разобраться в том, как работают оси, объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction :
align-self
Позволяет выравнивать элементы по отдельности:
#container < align-items: flex-start;>.square#one < align-self: center;>// Only this square will be centered. Для двух блоков применим align-self , а для остальных — align-items: center и flex-direction: row .
flex-basis
Отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами CSS Flexbox. flex-basis влияет на размер элементов вдоль главной оси. Давайте посмотрим, что случится, если мы изменим направление главной оси:
Заметьте, что нам пришлось изменить и высоту элементов: flex-basis может определять как высоту элементов, так и их ширину в зависимости от направления оси.
flex-grow
Это свойство немного сложнее. Для начала зададим блокам одинаковую ширину в 120px:По умолчанию значение flex-grow равно 0. Это значит, что блокам запрещено увеличиваться в размерах. Зададим flex-grow равным 1 для каждого блока:
Теперь блоки заняли оставшееся место в контейнере. Но что значит flex-grow: 1 ? Попробуем сделать flex-grow равным 999:
И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные. Это значит, что не важно, какое значение у flex-grow , важно, какое оно по отношению к другим блокам:
Вначале flex-grow каждого блока равен 1, в сумме получится 6. Значит, наш контейнер разделён на 6 частей. Каждый блок будет занимать 1/6 часть доступного пространства в контейнере. Когда flex-grow третьего блока становится равным 2, контейнер делится на 7 частей: 1 + 1 + 2 + 1 + 1 + 1. Теперь третий блок занимает 2/7 пространства, остальные — по 1/7. И так далее.
flex-grow работает только для главной оси, пока мы не изменим её направление.
flex-shrink
Прямая противоположность flex-grow . Определяет, насколько блоку можно уменьшиться в размере. flex-shrink используется, когда элементы не вмещаются в контейнер. Вы определяете, какие элементы должны уменьшиться в размерах, а какие — нет. По умолчанию значение flex-shrink для каждого блока равно 1. Это значит, что блоки будут сжиматься, когда контейнер будет уменьшаться.Зададим flex-grow и flex-shrink равными 1:
Теперь поменяем значение flex-shrink для третьего блока на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:
flex-shrink основывается на пропорциях. То есть, если у первого блока flex-shrink равен 6, а у остальных он равен 2, то, это значит, что первый блок будет сжиматься в три раза быстрее, чем остальные.
flex
Заменяет flex-grow , flex-shrink и flex-basis . Значения по умолчанию: 0 (grow) 1 (shrink) auto (basis) .Создадим два блока:
.square#one < flex: 2 1 300px;>.square#two
У обоих одинаковый flex-basis . Это значит, что оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding ). Но когда контейнер начнет увеличиваться в размерах, первый блок (с большим flex-grow ) будет увеличиваться в два раза быстрее, а второй блок (с наибольшим flex-shrink ) будет сжиматься в два раза быстрее:Ещё больше возможностей свойства вы можете найти в анимированном руководстве по CSS flex.
Дополнительно
Как с CSS Flexbox меняется размер?
Когда увеличивается первый блок, он не становится в два раза больше второго, и когда уменьшается второй, он также не становится в два раза меньше первого. Это происходит из-за того, что flex-grow и flex-shrink отвечают за темп роста и сокращения.
Немного математики
И последний пример по flex box CSS. Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding , и у нас останется 600px для двух блоков. Когда ширина контейнера становится равной 430px (потеря в 210px), первый блок ( flex-shrink: 1 ) теряет 70px. Второй блок ( flex-shrink: 2 ) теряет 140px. Когда контейнер сжимается до 340px, мы теряем 300px. Первый блок теряет 100px, второй — 200px. То же самое происходит и с flex-grow .
Если помимо flex CSS вы также интересуетесь CSS Grid, можете ознакомиться с нашей статьёй, где мы рассматриваем Flexbox и Grid.
Надеемся, вам была полезна наша анимированная Flexbox шпаргалка. Подписывайтесь на тег CSS, чтобы узнать больше о возможностях Флексбокс и не только.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.