Как задать размер контейнера в css

Как сделать контейнер по ширине содержимого?

Простой вариант для частного случая, когда .inside — что-то вроде счетчика над кнопкой:

.block < margin: 50px; >.container < width: 20px; height: 20px; border: 1px solid #858585; border-radius: 50%; >.inside

 
 
1000000
 
 

Отслеживать
ответ дан 31 июл 2021 в 12:16
Alexey Vladimirov Alexey Vladimirov
1,504 1 1 золотой знак 4 4 серебряных знака 15 15 бронзовых знаков

• html
• css
• css3

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

CSS: Flex-контейнер

Расположение элементов на странице — одна из важных областей работы верстальщика или фронтенд-разработчика. Во всех прошлых уроках мы добавляли небольшие элементы, но их расположение определялось только тем, как они были добавлены в HTML. Чаще всего это просто расположение сверху вниз.

При верстке страниц разработчику нужно располагать элементы не только таким образом, но и рядом друг с другом.

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

Одним из способов решения такой задачи является использование модуля Flex из CSS. Для этого достаточно указать свойство display со значением flex у общего блока, внутри которого находятся блоки с практикой и теорией.

 .container 
 
 

Для наглядности добавим немного стилей, чтобы увидеть расположение блоков

Тут теория
Тут редактор с практикой

В текущей верстке блок с классом container называется Flex-контейнер, а элементы с классами theory и practice будут называться Flex-элементами. Важно, что flex-элементы это только те элементы, которые лежат непосредственно внутри контейнера.

 .container 
 
 
 

В этой разметке flex-элементами будут блоки с классами theory и practice , но вложенные в них блоки с классами theory-text и vscode уже не являются flex-элементами. На них не будут действовать правила, которые мы изучим в следующих уроках.

Задание

Создайте флекс контейнер с классом qa , внутри которого будет два элемента:

1. Блок с текстом: Какие языки программирования наиболее востребованы в 2023? . Блок имеет ширину 40% . Класс для блока: question
2. Блок с текстом: Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript . Ширина блока 60% . Класс для блока: answer

Попробуйте самостоятельно стилизовать элементы, чтобы сделать из этого блока настоящий блок с вопросами и ответами. Тесты будут проверять только правильное использование контейнера

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

• Все блоки, которые непосредственно находятся внутри контейнера называются Flex-элементами

CSS-свойства для flex-контейнера

Давайте познакомимся со свойствами, предназначенными специально для flex-контейнера — элемента, которому задано свойство display со значением flex .

Свойство flex-direction

Свойство flex-direction позволяет управлять направлением главной оси flex-контейнера. Данное свойство предназначено для применения к контейнерам и принимает следующие значения:

• row (значение по умолчанию) — направление главной оси пролегает слева направо (как на схеме выше) для локали LTR и справа налево для локали RTL.
• row-reverse — здесь, наоборот, направление главной оси пролегает справа налево, если локаль LTR, и слева направо, если локаль RTL.
• column — направление главной оси пролегает сверху вниз.
• column-reverse — направление главной оси пролегает снизу вверх.

Работа этих значений выглядит следующим образом:

Свойство justify-content

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

Свойство justify-content применяется к flex-контейнеру, и принимает такие значения:

• flex-start (значение по умолчанию) — flex-элементы прижимаются к началу главной оси.
• flex-end — flex-элементы прижимаются к концу главной оси.
• center — flex-элементы центрируются по главной оси.
• space-between — первый flex-элемент находится в начале главной оси, последний flex-элемент — в ее конце, а все остальные flex-элементы равномерно распределяются в пределах оставшегося пространства.
• space-around — все flex-элементы равномерно распределяются на главной оси, при этом свободное пространство поровну делится между ними.

Работа этих значений проиллюстрирована ниже:

Свойство align-items

Align-items — еще одно свойство, применяемое к flex-контейнеру для выравнивания его дочерних элементов. Только на этот раз выравнивание происходит не по главной оси, а по поперечной. Рассмотрим список значений:

• stretch (значение по умолчанию) — flex-элементы растягиваются вдоль поперечной оси (если при этом указаны свойства min-width / max-width , они принимаются во внимание).
• flex-start — flex-элементы прижимаются к началу поперечной оси.
• flex-end — flex-элементы прижимаются к концу поперечной оси.
• center — flex-элементы центрируются по поперечной оси.
• baseline — flex-элементы выравниваются по своим базовым линиям.

Примеры для лучшего понимания информации:

Свойство flex-wrap

На примерах выше были показаны примитивные примеры с использованием лишь одной строки (столбца) flex-контейнера. Да, по умолчанию так и есть: flex-контейнер содержит в себе лишь одну линию. Но благодаря свойству flex-wrap можно активировать многострочность во flex-контейнере. Свойство принимает следующие значения:

• nowrap (значение по умолчанию) — flex-элементы размещаются в одной линии, слева направо (либо справа налево для локации RTL).
• wrap — flex-элементы выстраиваются горизонтально в несколько рядов (при условии, что они не помещаются в один ряд). Направление элементов — слева направо (или справа налево для RTL).
• wrap-reverse — принцип действия идентичен предыдущему свойству, с той лишь разницей, что расположение flex-элементов происходит в реверсном порядке.

Свойство flex-flow

Свойство flex-flow — это, по сути, сокращенная запись свойств flex-direction и flex-wrap . Вы можете одной строкой задать направление главной оси и определить многострочность flex-контейнера. В свойстве указываются два значения через пробел: одно для flex-direction , второе для flex-wrap . Пример:

flex-flow: column wrap-reverse;

Свойство align-content

Данное свойство работает только в том случае, если flex-контейнер поддерживает многострочность. При помощи align-content можно указать, как будут выравниваться ряды flex-элементов по вертикали. Доступные значения:

• stretch (значение по умолчанию) — ряд flex-элементов растягивается по вертикали, пока не упрется в следующий ряд (если при этом указаны свойства min-width / max-width , они принимаются во внимание).
• flex-start — ряды flex-элементов прижимаются к началу flex-контейнера.
• flex-end — ряды flex-элементов прижимаются к концу flex-контейнера.
• center — ряды flex-элементов вертикально центрируются во flex-контейнере.
• space-between — первый ряд flex-элементов находится в начале flex-контейнера, последний ряд flex-элементов — в конце, а все остальные ряды равномерно распределяются в пределах оставшегося пространства.
• space-around — все ряды flex-элементов равномерно распределяются в вертикальном пространстве flex-контейнера, при этом свободное пространство поровну делится между ними.

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

box-sizing

CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.

Интерактивный пример

По умолчанию в блоковой модели CSS ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с width: 25%; , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.

Свойство box-sizing может изменять это поведение:

• content-box даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.
• border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.

**Примечание:**Часто выставление box-sizing: border-box полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устраняет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя position-relative или position: absolute , box-sizing: content-box позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.

Синтаксис

Для свойства box-sizing устанавливается единственное ключевое слово из списка значений ниже.

Значения

Это значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box будет иметь ширину 370 пикселей.Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)

Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение — 0, поэтому border-box невозможно использовать для скрытия элемента.Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.

Формальный синтаксис

box-sizing =
content-box | (en-US)
border-box

Примечание: Значение padding-box устарело

Пример

Этот пример показывает как разные значения box-sizing изменяют видимый размер двух идентичных элементов.

HTML

div class="content-box">Content boxdiv> br /> div class="border-box">Border boxdiv> 

CSS

div  width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; > .content-box  box-sizing: content-box; /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px Total height: 80px + (2 * 20px) + (2 * 8px) = 136px Content box width: 160px Content box height: 80px */ > .border-box  box-sizing: border-box; /* Total width: 160px Total height: 80px Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ > 

Результат

Спецификации

Specification
CSS Box Sizing Module Level 3 # box-sizing

Начальное значение	content-box
Применяется к	все элементы, которые могут иметь ширину и высоту
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.