Что, если бы вы могли создать сложный макет CSS за считанные минуты? Flexbox — это новый макет CSS, который упрощает создание динамических макетов.
С Flexbox вертикальное выравнивание, блоки одинаковой высоты, перестановка и направление выполняются с легкостью.
Существует популярный миф о том, что флекс еще не готов к использованию.
Но это неправда! ты 93 % люди сейчас используют браузер, поддерживающий flexbox .
Это лучше, чем поддержка HTML5. В этой статье я познакомлю вас с основами flexbox на примере создания игральной кости.
На данный момент мы пропустим некоторые более сложные тонкости flexbox, такие как префиксы поставщиков, устаревший синтаксис и особенности браузера.
Мы рассмотрим их на следующих уроках.
Первая сторона
Куб состоит из шести граней (граней).Каждая грань имеет ряд точек (точек), определяющих значение стороны.
Первая сторона состоит из одной точки в центре.
Начнем с HTML.
Чтобы немного облегчить жизнь, я добавил базовые стили для сторон и точек.<div class="first-face"> <span class="pip"></span> </div>
Вот что произошло: 
Сначала вам нужно сообщить браузеру, что .
firtst-face
это флексбокс-контейнер .
first-face {
display: flex;
}
Внешне ничего не изменилось, но под капотом изменилось многое.
Сейчас
.имеет горизонтальную главную ось.первое лицо
Основная ось может быть как вертикальной, так и горизонтальной, но по умолчанию используется горизонтальная.
Если бы мы добавили еще одну точку сбоку, она оказалась бы справа от первой.
Контейнер также имеет вертикальную ось.
Малая ось всегда перпендикулярна главной оси.
Свойство
оправдание-содержаниеопределяет выравнивание по главной оси.
Поскольку мы хотим, чтобы точка была центрирована относительно главной оси, мы будем использовать значение
центр
.
first-face {
display: flex;
justify-content: center;
}
Поскольку основная ось горизонтальна, точка теперь находится в центре родительского элемента.
Характеристики
выравнивание элементовопределяет, как элементы располагаются вдоль горизонтальной оси.
Ведь мы хотим, чтобы точка располагалась в центре по этой оси, будем использовать значение
центр, как раньше.
.
first-face {
display: flex;
justify-content: center;
align-items: center;
}
Правильно, точка теперь в центре!
Давайте двигаться дальше
На второй грани куба первая ровно расположена в левом верхнем углу, а вторая – в правом нижнем.
Это довольно легко сделать с помощью flexbox.
Еще раз начнем с разметки и базового CSS: <div class="second-face">
<span class="pip"></span>
<span class="pip"></span>
</div>
.
second-face {
display: flex;
}
Теперь у нас есть две точки рядом друг с другом.
На этот раз мы хотим, чтобы точки были на противоположных сторонах лица.
Имеет особое значение для
оправдание-содержаниечто позволит нам сделать это:
пространство-между.
Свойство
пространство-междуравномерно заполняет пространство между гибкими элементами.
Поскольку точек всего две, это отталкивает их друг от друга.
.
second-face {
display: flex;
justify-content: space-between;
}
Здесь мы столкнулись с проблемой.
В отличие от предыдущего случая, мы не можем использовать
выравнивание элементов, так как это затронет обе точки.
К счастью, flexbox включает в себя
выровнять-самостоятельно.
Это свойство позволяет выравнивать отдельные элементы контейнера Flex вдоль поперечной оси — именно то, что мы хотели! Значение, которое мы хотим установить для этого свойства, равно
гибкий конец.
.
second-face { display: flex; justify-content: space-between; } .
second-face .
pip:nth-of-type(2) {
align-self: flex-end;
}
Выглядит неплохо!
Горизонтальные и вертикальные вложения
Пропустим третью грань и перейдем к четвертой.Это немного сложнее остальных, потому что нам нужно поддерживать две колонны, каждая с двумя точками.
В flexbox нас спасут две вещи: контейнеры Flex могут иметь контент вертикально и горизонтально, а контейнеры Flex могут быть вложенными.
С этого момента наша разметка будет включать столбцы.
<div class="fourth-face">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
Поскольку мы хотим, чтобы две колонны находились на противоположных сторонах забора, давайте переместимся и воспользуемся
justify-content: пространство междукак мы делали раньше.
.
fourth-face {
display: flex;
justify-content: space-between;
}
Далее нам нужно превратить столбцы в контейнеры flexbox. Может показаться, что они уже есть, но помните, что мы еще не установили display: flex. Мы можем использовать имущество
гибкое направлениечтобы установить направление главной оси колонны.
.
fourth-face { display: flex; justify-content: space-between; } .
fourth-face .
column {
display: flex;
flex-direction: column;
}
Внешне ничего не изменилось, но колонки теперь представляют собой гибкие контейнеры.
Обратите внимание, как мы вставили гибкий контейнер прямо в другой гибкий контейнер? Это отлично! flexbox не заботится о том, вложены ли контейнеры.
Последний шаг — это расстояние между точками внутри столбцов.
Поскольку главная ось вертикальна, мы снова можем использовать
оправдание-содержание.
.
fourth-face { display: flex; justify-content: space-between; } .
fourth-face .
column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Заключение
Мы создали 3 лица, и этих знаний должно хватить, чтобы сделать еще 3. Ссылка на оригинальную статью Теги: #flexbox #css3 #HTML #Разработка сайтов #CSS #HTML-
Что Скрывают Протоны?
19 Oct, 24 -
Редактирование Локальной Формы
19 Oct, 24 -
Bsxinsight — Проверка Мышц На Износ
19 Oct, 24 -
Рейтинг Бренда 2006 Г.
19 Oct, 24
