Как разделить контейнер на две части css

Как разбить блок на две независимые части

Я хочу разбить bar-line на две части (1 и 2 как на прикрепленном рисунке) и работать с ними уже отдельно как с flex элементами
HTML:

    some text
 some text

.top-bar < position: fixed; width: 100%; height: 4%; background-image: url("Rectangle.png"); padding : 1%; >.top-bar-сlone < position: static; visibility: hidden; width: 100%; height: 6%; >.bar-line < display: flex; flex-direction: row; justify-content: space-between; height: 100%; >.bar-line-right < height: 100%; justify-content: flex; >.bar-line-left

Вот как это выглядит: Вот как это выглядит сейчас А вот как хотелось бы, где внутри 1 лежит bar-line-left , а внутри 2 bar-line-right Макет ожидаемого

Отслеживать

задан 19 сен 2019 в 16:26

712 2 2 золотых знака 7 7 серебряных знаков 21 21 бронзовый знак

Создаём CSS-сетку нужного размера

У нас идёт цикл статей о современном CSS: как на нём собирать штуки, о которых раньше мы могли только мечтать. В прошлый раз мы говорили о CSS-сетке Grid. Сегодня мы её будем настраивать.

В CSS есть много способов расставить объекты на странице: по абсолютным координатам, относительно друг друга, закрепив в каком-то месте страницы и т. д.
Один из полезных для веб-разработчика способов — разделить страницу на столбцы и строки, как будто это таблица или сетка. И внутри этой сетки расставить объекты.
Инструмент Grid как раз помогает нарисовать на странице воображаемую сетку и выравнивать объекты по ней.
Grid достаточно гибкий, чтобы учесть меняющуюся ширину экрана и предсказуемо управлять столбцами и строками.

Сегодня поработаем с размером ячеек сетки, чтобы в следующий раз собрать из них что-то действительно полезное.

Готовим шаблон

Начнём с пустого шаблона. Чтобы было наглядно видно, как в сетке располагаются ячейки, сделаем так:

Создадим общий класс, который будет отвечать за сетку целиком. Пока не будем делать разбивку на строки и столбцы.
В нём сделаем видимые внешние границы — так мы поймём, какого размера сетка у нас получается.
Каждую ячейку закрасим светло-оранжевым цветом, чтобы видеть, где заканчивается одна ячейка и начинается другая.
Добавим в оформление ячеек отступы и скругления для красоты.
После этого в теле страницы создадим новый блок и применим к нему наш стиль с сеткой.
Добавим 10 новых элементов в сетку и посмотрим, что получится.

   Grid     Элемент 1
 Элемент 2
 Элемент 3
 Элемент 4
 Элемент 5
 Элемент 6
 Элемент 7
 Элемент 8
 Элемент 9
 Элемент 10

Вот что у нас получается, если у сетки не задавать никаких параметров:

элементы располагаются друг под другом в одну колонку;
сетка растягивается по ширине на весь экран;
элементы тоже растягиваются по ширине;
по высоте сетка занимает ровно столько, чтобы вместить всё содержимое. На всю высоту сетка автоматически не растягивается.

Формируем строки и столбцы

Давайте посмотрим, как добавление строк и столбцов в сетку влияет на положение и размер ячеек.

Сделаем в сетке три колонки по 150 пикселей:

grid-template-columns: 150px 150px 150px;

Сетка сразу уменьшилась по высоте, подстраиваясь под количество элементов. Теперь укажем нужную высоту для элементов:

Смотрите, высота поменялась только у первой строки. Остальные остались той же высоты, что и раньше, потому что мы указали только один параметр в команде grid-template-rows. Сделаем 5 строк одинаковой высоты:

grid-template-rows: 50px 50px 50px 50px 50px ;

Так как мы явно указали, что нам в сетке нужно 5 строк, то у нас появилась пустая пятая строка. В ней пока никаких элементов, но сетка уже предусмотрела для них свободное место.

Чтобы не писать пять раз подряд размер 50px, можно использовать такую команду:

grid-template-rows: repeat(5, 50px);

Она повторяет нужный нам размер (50 пикселей) определённое количество раз — в нашем случае это 5 раз. То же самое работает и с колонками — сделаем 4 одинаковые колонки используя функцию repeat():

grid-template-columns: repeat(4, 150px);

Адаптивные размеры и автозаполнение

Теперь сделаем так:

поставим три строки вместо пяти;
последнюю строку растянем вниз до конца окна — используем для этого 1fr;
столбцы сделаем одинаковой ширины.

Запишем это в разделе со стилями:

grid-template-rows: 50px 1fr 50px;
grid-template-columns: repeat(4, 1fr);

Кажется, что 1fr, который должен был растянуть вторую строку на всё свободное место, не работает. Но с ним всё в порядке, ошибки тут нет, смотрите, что произошло на самом деле:

Первая строка получила ширину 50 пикселей.
Третья строка тоже получила 50 пикселей.
После этого браузер, глядя на 1fr, стал высчитывать, какую высоту сделать у второй строки.
Браузер знает, что 1fr должен заполнить всё оставшееся свободное место в сетке, но у нас нижняя граница сетки прилегает вплотную к последней строке.
Это значит, что свободного места в сетке нет, поэтому браузер учёл все внутренние отступы из общих настроек ячейки и сделал вторую строку минимальной высоты.

Чтобы это исправить, нам нужно явно задать общую высоту сетки — например в пикселях:

Чтобы сетка растянулась по высоте на всё окно, используют относительные единицы, например, vh — она указывает, сколько процентов от высоты окна будет занимать элемент. Чтобы растянуть сетку до края, напишем:

Полосы прокрутки появились из-за того, что общий размер сетки у нас больше 100% высоты окна — к высоте добавились внешние и внутренние отступы сетки.

Если нам нужно сделать столбцы и строки в определённых пропорциях, также используем fr — он подгонит всё под размер окна:

height: 92vh;
grid-template-columns: 1fr 2fr 2fr 1fr ;
grid-template-rows: 50px 1fr 50px;

Теперь у нас получился красивый шаблон на 12 ячеек:

верхняя и нижние строки высотой по 50 пикселей;
средняя растягивается на всю высоту;
вторая и третья колонки в два раза шире, чем боковые.

Используя нужные размеры, автозаполнение и полезные функции из нашей подборки современных CSS-команд, можно получить любой шаблон для вёрстки страницы.

Что дальше

Статья получилась большой, поэтому про работу с ячейками и областями сетки поговорим в другой раз. А потом сверстаем на сетке полноценную страницу-портфолио.

Колонки

Узнайте, как благодаря нашей системе сеток flexbox изменять столбцы с помощью нескольких опций выравнивания, упорядочивания и смещения. Также смотрите как использовать классы столбцов для управления шириной элементов не связанных с сеткой.

На этой странице

Внимание! Обязательно прочитайте страницу Система сеток, прежде чем углубляться в то, как изменять и настраивать столбцы сетки.

Как это работает

Столбцы основаны на архитектуре flexbox. Это означает, что у нас есть опции для изменения отдельных столбцов и изменения групп столбцов на уровне строк. Вы выбираете как столбцы увеличить, уменьшить или изменить иным образом.
При построении макетов сетки весь контент помещается в столбцы. Иерархия сетки Bootstrap переходит от контейнера к строке столбца вашего контента. В редких случаях вы можете комбинировать контент и колонку, но делайте это внимателно.
Bootstrap включает в себя предопределенные классы для создания быстрых, адаптивных макетов. Имея шесть контрольных точек, дюжину столбцов на каждом уровне сетки и десятки классов, можно создать своих индивидуальные макеты. При желании, это можно настроить через Sass.

Выравнивание

Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали.

Вертикальное выравнивание

Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок

div class="container"> div class="row align-items-start"> div class="col"> Одна из трёх колонок div> div class="col"> Одна из трёх колонок div> div class="col"> Одна из трёх колонок div> div> div class="row align-items-center"> div class="col"> Одна из трёх колонок div> div class="col"> Одна из трёх колонок div> div class="col"> Одна из трёх колонок div> div> div class="row align-items-end"> div class="col"> Одна из трёх колонок div> div class="col"> Одна из трёх колонок div> div class="col"> Одна из трёх колонок div> div> div>

Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок

div class="container"> div class="row"> div class="col align-self-start"> Одна из трёх колонок div> div class="col align-self-center"> Одна из трёх колонок div> div class="col align-self-end"> Одна из трёх колонок div> div> div>

Горизонтальное выравнивание

Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок

div class="container"> div class="row justify-content-start"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-center"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-end"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-around"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-between"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-evenly"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div>

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, то каждая группа дополнительных колонок, как одно целое, переносится на новую строку.

.col-4
Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки переносится на новую строку как один непрерывный блок.

.col-6
Последующие колонки продолжаются вдоль новой строки.

div class="container"> div class="row"> div class="col-9">.col-9div> div class="col-4">.col-4br>Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки переносится на новую строку как один непрерывный блок.div> div class="col-6">.col-6br>Последующие колонки продолжаются вдоль новой строки.div> div> div>

Разрывы колонок

Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с шириной width: 100% туда, где вы хотите обернуть ваши колонки новой строкой. Обычно это достигается с помощью нескольких .row , но не каждый исполнительный метод поддерживает это.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3

div class="container"> div class="row"> div class="col-6 col-sm-3">.col-6 .col-sm-3div> div class="col-6 col-sm-3">.col-6 .col-sm-3div> div class="w-100">div> div class="col-6 col-sm-3">.col-6 .col-sm-3div> div class="col-6 col-sm-3">.col-6 .col-sm-3div> div> div>

Вы можете также применять это в брейкпойнтах с нашими отзывчивыми утилитами отображения элементов.

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

div class="container"> div class="row"> div class="col-6 col-sm-4">.col-6 .col-sm-4div> div class="col-6 col-sm-4">.col-6 .col-sm-4div> div class="w-100 d-none d-md-block">div> div class="col-6 col-sm-4">.col-6 .col-sm-4div> div class="col-6 col-sm-4">.col-6 .col-sm-4div> div> div>

Упорядочивание

Класса порядка

Используйте классы .order- для управления визуальным порядком Вашего контента. Эти классы отзывчивы, поэтому Вы можете установить order по контрольной точке (например, .order-1.order-md-2 ). Включает поддержку от 1 до 5 на всех шести уровнях сетки.

DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера. Если сказать по-простому, то HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при парсинге её текста.

Первый в DOM, но неупорядоченный
Второй в DOM, но последний
Третий в DOM, но первый

div class="container"> div class="row"> div class="col"> Первый в DOM, но неупорядоченный div> div class="col order-5"> Второй в DOM, но последний div> div class="col order-1"> Третий в DOM, но первый div> div> div>

Также существуют отзывчивые классы .order-first и .order-last , которые изменяют порядок элемента, применяя order order: -1 и order: 6 соответственно. Эти классы также могут применяться с нумерованными классами .order-* по мере необходимости.

Первый в DOM, но неупорядоченный
Второй в DOM, но последний
Третий в DOM, но первый

div class="container"> div class="row"> div class="col order-last"> Первый в DOM, но неупорядоченный div> div class="col"> Второй в DOM, но последний div> div class="col order-first"> Третий в DOM, но первый div> div> div>

Смещение колонок

Вы можете смещать колонки сетки двумя путями: с помощью отзывчивых классов .offset- и с помощью наших утилит интервалов. Классы сетки созданы так, чтобы совпадать с колонками, а отступы удобней для быстрого расположения элементов там, где ширина офсета непостоянна.

Классы смещения

Двигайте колонки вправо, используя классы .offset-md-* . Они увеличивают левый отступ колонки на * колонок. Например, класс .offset-md-4 двигает .col-md-4 на 4 колонки.

.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

div class="container"> div class="row"> div class="col-md-4">.col-md-4div> div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4div> div> div class="row"> div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div> div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div> div> div class="row"> div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3div> div> div>

В дополнение к «сбросу» колонок на брейкпойнтах, вам может понадобиться сброс офсетов. Смотрите пример с разметкой.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

div class="container"> div class="row"> div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6div> div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0div> div> div class="row"> div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6div> div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0div> div> div>

Утилиты полей

С переходом на flexbox вы можете использовать утилиты полей, такие как .mr-auto , чтобы отодвинуть одноуровневые столбцы друг от друга.

.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto

div class="container"> div class="row"> div class="col-md-4">.col-md-4div> div class="col-md-4 ms-auto">.col-md-4 .ms-autodiv> div> div class="row"> div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-autodiv> div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-autodiv> div> div class="row"> div class="col-auto me-auto">.col-auto .me-autodiv> div class="col-auto">.col-autodiv> div> div>

Автономные классы колонок

Классы .col-* также могут использоваться вне .row для придания элементу определенной ширины. Всякий раз, когда классы столбцов используются как непрямые дочерние элементы строки, отступы опускаются.

.col-3: ширина 25%
.col-sm-9: ширина 75% выше контрольной точки sm

div class="col-3 bg-light p-3 border"> .col-3: ширина 25% div> div class="col-sm-9 bg-light p-3 border"> .col-sm-9: ширина 75% выше контрольной точки sm div>

Классы могут использоваться вместе с утилитами для создания адаптивных плавающих изображений. Обязательно оберните содержимое в оболочку .clearfix , чтобы очистить текст, если текст более короткий.

Placeholder

Адаптивное плавающее изображение

Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.

Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.

И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.

div class="clearfix"> img src=". " class="col-md-6 float-md-end mb-3 ms-md-3" alt=". "> p> Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением. p> p> Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать. p> p> И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет. p> div>