Какое утверждение неверно в отношении place self

place-self

place-self CSS сокращённое свойство позволяет выравнивать отдельный элемент как в блоке и инлайн направлений одновременно (т.е. align-self и justify-self свойство) в соответствующей системе компоновки , такие как сетки или Flexbox . Если второе значение отсутствует, для него также используется первое значение.

Try it

Constituent properties

Это свойство является сокращением для следующих свойств CSS:

Syntax

Values

Вычисляет до значения align-items родительского элемента .

Эффект этого ключевого слова зависит от того,в каком режиме компоновки мы находимся:

В абсолютно позиционированных макетах ключевое слово ведет себя как start в замененных абсолютно позиционированных блоках и как stretch во всех остальных абсолютно позиционированных блоках.
В статическом положении абсолютно позиционированных макетов ключевое слово ведет себя как stretch .
Для гибких элементов ключевое слово ведет себя как stretch .
Для элементов сетки это ключевое слово ведет к поведению, аналогичному stretch , за исключением полей с соотношением сторон или внутренних размеров, где оно ведет себя как start .
Свойство не относится к блокам на уровне блоков и к ячейкам таблицы.

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

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

Поперечный край края сгибается вровень с поперечным краем линии.

Край с поперечным краем изгиба находится заподлицо с краем линии сгиба.

Поле для флекса находится в центре линии на поперечной оси.Если поперечный размер предмета больше,чем контейнер для флексов,то он будет переливаться одинаково в обоих направлениях.

baseline , first baseline . last baseline

Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего набора базовых линий блока с соответствующей базовой линией в общем первом или последнем наборе базовых линий всех блоков в его группе совместного использования базовой линии. Резервное выравнивание для first baseline — это start , для last baseline — это end .

Если объединенный размер элементов вдоль поперечной оси меньше, чем размер контейнера выравнивания, и элемент имеет auto размер, его размер увеличивается одинаково (не пропорционально), при этом все еще соблюдаются ограничения, налагаемые max-height / max-width (или эквивалентную функциональность), так что объединенный размер всех auto масштабируемых элементов точно заполняет контейнер выравнивания вдоль поперечной оси.

CSS place-self Property

Align an individual grid item at the end in the block and inline directions:

More «Try it Yourself» examples below.

Definition and Usage

The place-self property is used to align individual grid items, and is a shorthand property for the following properties:

align-self
justify-self

If the place-self property has two values:

place-self: start center;
- align-self property value is ‘start’
- justify-self property value is ‘center’
If the place-self property has one value:
- place-self: end;
  - align-self and justify-self property values are both ‘end’
  Default value: auto
  
  Inherited: no
  
  Animatable: no. Read about animatable
  
  Version: CSS3
  
  JavaScript syntax: object.style.placeSelf="end stretch" Try it
  
  Browser Support
  
  The numbers in the table specify the first browser version that fully supports the property.
  
  Property
  
  place-self 59.0 79.0 45.0 11.0 46.0
  
  CSS Syntax
  
  Property Values
  - ‘safe’ sets alignment of the item to ‘start’ if the content overflows
  - ‘unsafe’ keeps the alignment value regardless of wether or not the item content overflows
  More Examples
  
  Writing-mode
  
  With the writing-mode property value of a <div> element set to ‘vertical-rl’, the end of the grid cell in block direction is moved from bottom to the left, and the end of the grid cell in the inline direction is moved from right to the bottom:
  
  #contianer <
  display: grid;
  writing-mode: vertical-rl;
  >
  
  Flexbox
  
  The place-self property can also be used for flexbox items, but the second value for justify-self will be ignored because it is not applicable with flexbox:
  
  Полное визуальное руководство/шпаргалка по CSS Grid
  
  Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.
  
  Что такое CSS Grid ?
  
  Грид — это макет для сайта (его схема, проект).
  
  Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.
  
  Вот простой пример макета сайта, созданного с помощью Грида.
  
  Компьютер
  
  Телефон
  
  Архитектура CSS Grid
  
  Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.
  
  Помимо прочего, у нас имеется возможность объединять строки и колонки подобно тому, как мы это делаем в Excel , что предоставляет нам большую гибкость, чем Флекс ( Flexbox ).
  
  К слову, если вас интересует Флекс, вот соответствующая статья.
  
  Схема CSS Grid
  
  Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:
  - родительские (свойства грид-контейнера) и
  - дочерние (свойства грид-элементов)
  Обратите внимание: красным цветом отмечены сокращения для свойств:
  
  К концу настоящей статьи у вас будет полное понимание того, как работает каждое из них.
  
  Настройка проекта
  
  Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:
  1. Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
  2. Создаем файлы index.html и style.css
  3. Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его
  Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.
  
  Все готово, можно приступать к делу.
  
  Создаем 3 контейнера внутри body :
  
  Шаг 1
  
  Шаг 2
  
  Немного стилизуем body :
  
  Шаг 3
  
  Стилизуем все контейнеры:
  
  Не волнуйтесь, мы рассмотрим каждое из указанных свойств Грида.
  
  Шаг 4
  
  Добавим небольшой отступ между контейнерами:
  
  Погодите-ка
  
  Давайте разберемся с отношениями между родительским и дочерними элементами.
  
  Свойства родительского элемента определяются в .container , а свойства дочерних элементов — в .box-* .
  
  Свойства грид-контейнера
  
  Начнем со свойств родительского элемента.
  
  grid-template-columns
  
  Данное свойство используется для определения количества и ширины колонок. При этом, можно определять как свойства для каждой колонки в отдельности, так и устанавливать ширину всех колонок с помощью функции repeat() .
  
  />
  
  Добавим строку в style.css :
  - значения в пикселях будут точными. Ключевое слово auto означает заполнение элементом всего доступного пространства
  - использование единицы fr (фракция) в repeat() означает, что все контейнеры будут иметь одинаковую ширину
  grid-template-rows
  
  Данное свойство используется для определения количества и высоты строк. При этом, можно определять как высоту каждой колонки в отдельности, так и устанавливать высоту всех строк с помощью функции repeat() .
  
  Изменим строку в style.css :
  
  grid-template-areas
  
  Данное свойство используется для определения количества пространства, занимаемого ячейкой Грида (grid cell), в терминах колонок и строк, в родительском контейнере.
  
  Это можно считать схемой макета:
  
  Для получения результата требуется не только родительское, но и хотя бы одно дочернее свойство:
  - grid-template-areas : родительское свойство, создающее схему
  - grid-area : дочернее свойство, которое использует схему
  Создаем схему
  
  Применяем схему
  
  Обратите внимание: мы вернемся к свойству grid-area , когда будем говорить о дочерних свойствах.
  
  column-gap
  
  Данное свойство используется для добавления отступа между колонками.
  
  Обратите внимание: свойство column-gap используется совместно со свойством grid-template-columns .
  
  row-gap
  
  Данное свойство используется для добавления отступов между строками.
  
  Обратите внимание: свойство row-gap используется совместно со свойством grid-template-rows .
  
  justify-items
  
  Данное свойство используется для позиционирования грид-элементов внутри грид-контейнера вдоль главной оси. Оно принимает 4 возможных значения:
  
  Добавим еще один контейнер в HTML :
  
  И немного изменим CSS :
  
  align-items
  
  Данное свойство используется для позиционирования грид-элементов внутри грид-контейера вдоль поперечной оси. Оно принимает 4 возможных значения:
  
  justify-content
  
  Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль основной оси. Оно принимает 7 возможных значений:
  
  align-content
  
  Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль поперечной оси. Оно принимает 7 возможных значений:
  
  Свойства грид-элементов
  
  Шкала CSS Grid
  
  Данная шкала показывает, как вычисляются строки и колонки при их объединении. Для этого используется два вида единиц:
  - целые числа (1, 2, 3 и т.д.)
  - ключевое слово span
  На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:
  
  При использовании функции repeat() мы может установить одинаковую ширину/высоту для колонок/строк. Пример с колонками:
  
  Это аналогично следующему:
  
  Небольшая заметка
  
  При использовании единицы измерения fr , доступное пространство делится на равные части.
  
  В данном случае доступное пространство делится на 4 равные части.
  
  grid-columns: start/end
  
  Данное свойство позволяет объединять колонки. Оно является сокращением для:
  - grid-column-start
  - grid-column-end
  Мы разделили доступное пространство на 12 равных частей как по ширине, так и по высоте. 1 контейнер занимает 1 часть или фракцию. В данном случае 8 фракций остались невостребованными.
  
  Поскольку мы говорим о свойствах дочерних элементов, имеет смысл разделить их стили:
  
  Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.
  
  Каждый класс .box-* по умолчанию имеет такой масштаб (scale):
  
  Это можно переписать с помощью ключевого слова span :
  
  Давайте «присвоим» 8 фракций .box-1 :
  
  Небольшая заметка
  
  Как мы производим вычисления? box-1 занимает 1 часть. Кроме этого, к ней добавляется еще 8 частей. И еще 1 в конце. Получается: 8 + 1 + 1 = 10.
  
  Как использовать ключевое слово span
  
  Считается, что использование span делает код более читаемым.
  
  В этом случае нам просто нужно добавить к box-1 8 частей:
  
  Это даст такой же результат.
  
  grid-row: start/end
  
  Данное свойство позволяет объединять строки. Оно является сокращением для:
  - grid-row-start
  - grid-row-end
  Теперь сосредоточимся на строках:
  
  Давайте добавим к box-1 9 частей:
  
  Расчет выглядит так: box-1 занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.
  
  Вот вариант со span :
  
  grid-area
  
  Сначала нам нужно настроить grid-temlate-areas , о чем мы говорили выше. После этого в дочерних классах определяются названия областей, которые используются в родительском классе:
  
  Определяем grid-template-areas в родительском классе:
  
  Затем определяем grid-area в дочерних классах:
  
  justify-self
  
  Данное свойство используется для позиционирования отдельного грид-элемента вдоль основной оси. Оно принимает 4 возможных значения:
  
  align-self
  
  Данное свойство используется для позиционирования отдельного грид-элемента вдоль поперечной оси. Оно принимает 4 возможных значения:
  
  Сокращения для свойств CSS Grid
  - place-content
  - place-items
  - place-self
  - grid-template
  - gap / grid-gap
  place-content
  
  Данное свойство является сокращением для:
  - align-content
  - justify-content
  place-items
  
  Данное свойство является сокращением для:
  - align-items
  - justify-items
  place-self
  
  Данное свойство является сокращением для:
  - align-self
  - justify-self
  grid-template
  
  Данное свойство является сокращением для:
  - grid-template-rows
  - grid-template-columns
  gap/grid-gap
  
  Данное свойство является сокращением для:
  - row-gap
  - columns-gap
  Заключение
  
  Теперь в ваших руках имеется мощное средство для создания адаптивных макетов веб-страниц.
  
  VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой. Загрузка своего ISO.
  
  place-self
  
  The place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox. If the second value is not present, the first value is also used for it.
  
  Try it
  
  Constituent properties
  
  This property is a shorthand for the following CSS properties:
  
  Syntax
  
  Values
  
  Computes to the parent’s align-items value.
  
  The effect of this keyword is dependent of the layout mode we are in:
  - In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
  - In static position of absolutely-positioned layouts, the keyword behaves as stretch .
  - For flex items, the keyword behaves as stretch .
  - For grid items, this keyword leads to a behavior similar to the one of stretch , except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start .
  - The property doesn’t apply to block-level boxes, and to table cells.
  Aligns the items to be flush with the edge of the alignment container corresponding to the item’s start side in the cross axis.
  
  Aligns the items to be flush with the edge of the alignment container corresponding to the item’s end side in the cross axis.
  
  The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
  
  The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
  
  The flex item’s margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
  
  baseline , first baseline . last baseline
  
  Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for first baseline is start , the one for last baseline is end .
  
  If the combined size of the items along the cross axis is less than the size of the alignment container and the item is auto -sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by max-height / max-width (or equivalent functionality), so that the combined size of all auto -sized items exactly fills the alignment container along the cross axis.
  
  Formal definition
  Formal syntax
  
  Examples
  
  Simple demonstration
  
  In the following example we have a simple 2 x 2 grid layout. Initially the grid container has justify-items and align-items values of stretch — the defaults — which causes the grid items to stretch across the entire width of their cells.
  
  The second, third, and fourth grid items are then given different values of place-self , to show how these override the default placements. These values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions.
  Похожие публикации: