Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Обновлена информация о свойстве align-content #5427

Merged
merged 7 commits into from
Jul 18, 2024
Merged

Обновлена информация о свойстве align-content #5427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6868364
update info about align-content
Cheremis88 Jul 8, 2024
1af1d04
Подробнее описывает, добавляет демо
solarrust Jul 10, 2024
c5236d6
Чуть твикает
skorobaeus Jul 10, 2024
cab44da
Merge branch 'doka-guide:main' into patch-1
Cheremis88 Jul 17, 2024
a6e7db7
Create index.md
Cheremis88 Jul 17, 2024
e562ebe
add photo
Cheremis88 Jul 17, 2024
2cdb791
Добавляет @cheremis88 в контрибьюторы, уменьшает фото, дарит значок
solarrust Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
253 changes: 253 additions & 0 deletions css/align-content/demos/all/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Песочница — align-content — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Mono&display=swap">
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
min-height: 100vh;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #18191c;
color: #FFFFFF;
font-family: "Roboto", sans-serif;
}

code {
font-family: "Roboto Mono", monospace;
}

.wrapper {
display: grid;
gap: 4rem;
width: 65%;
}

.controls {
display: grid;
gap: 3rem;
}

.display-controls,
.value-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 2rem;
}

.radio-label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}

.radio-title::before {
content: "";
position: absolute;
left: 0;
top: calc(50% - 12px);
width: 25px;
height: 25px;
border: 1px solid #FFFFFF;
border-radius: 50%;
}

.radio {
width: 25px;
height: 25px;
opacity: 0;
margin-right: 15px;
}

.radio:focus + .radio-title::before {
border-color: #2E9AFF;
}

.radio:checked + .radio-title::before {
background-color: #FFFFFF;
background: radial-gradient(
circle,
#FFFFFF 0%,
#FFFFFF 40%,
transparent 50%,
transparent 100%
);
}

.radio-label:has(.radio:disabled) {
opacity: 0.6;
pointer-events: none;
}

.parent {
position: relative;
display: flex;
grid-template-columns: repeat(3, 1fr);
align-content: normal;
flex-wrap: wrap;
height: 300px;
background-color: #123E66;
}

.parent::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-end: -1rem;
width: 1px;
background-color: #FFFFFF;
}

.parent::before {
content: "Поперечная ось";
position: absolute;
inset-inline-start: 0;
inset-block-start: -2.1rem;
writing-mode: vertical-rl;
}

.child {
flex-basis: 33%;
height: 20px;
border: 1px solid #123E66;
text-align: center;
align-content: center;
color: #000000;
background-color: #2E9AFF;
}

@media (max-width: 768px) {
body {
padding: 30px;
}

.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="controls">
<div class="display-controls">
<code>display: </code>
<label class="radio-label">
<input class="radio" type="radio" name="display" value="flex" checked>
<span class="radio-title"><code>flex</code></span>
</label>
<label class="radio-label">
<input class="radio" type="radio" name="display" value="grid">
<span class="radio-title"><code>grid</code></span>
</label>
<label class="radio-label">
<input class="radio" type="radio" name="display" value="block">
<span class="radio-title"><code>block</code></span>
</label>
</div>
<div class="value-controls">
<code>align-content: </code>
<label class="radio-label">
<input class="radio" type="radio" name="value" value="normal" checked>
<span class="radio-title"><code>normal</code></span>
</label>
<label class="radio-label">
<input class="radio" type="radio" name="value" value="start">
<span class="radio-title"><code>start</code></span>
</label>
<label class="radio-label">
<input class="radio" type="radio" name="value" value="center">
<span class="radio-title"><code>center</code></span>
</label>
<label class="radio-label">
<input class="radio" type="radio" name="value" value="end">
<span class="radio-title"><code>end</code></span>
</label>
<label class="radio-label">
<input class="radio flex-grid" type="radio" name="value" value="stretch">
<span class="radio-title"><code>stretch</code></span>
</label>
<label class="radio-label">
<input class="radio flex-grid" type="radio" name="value" value="space-between">
<span class="radio-title"><code>space-between</code></span>
</label>
<label class="radio-label">
<input class="radio flex-grid" type="radio" name="value" value="space-around">
<span class="radio-title"><code>space-around</code></span>
</label>
<label class="radio-label">
<input class="radio flex-grid" type="radio" name="value" value="space-evenly">
<span class="radio-title"><code>space-evenly</code></span>
</label>
<label class="radio-label">
<input class="radio flex-only" type="radio" name="value" value="flex-start">
<span class="radio-title"><code>flex-start</code></span>
</label>
<label class="radio-label">
<input class="radio flex-only" type="radio" name="value" value="flex-end">
<span class="radio-title"><code>flex-end</code></span>
</label>
</div>
</div>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">11</div>
</div>
</div>

<script>
const displayControls = document.querySelectorAll('.radio[name="display"]')
const valueControls = document.querySelectorAll('.radio[name="value"]')
const parent = document.querySelector('.parent')

displayControls.forEach(control => {
control.addEventListener('change', (event) => {
valueControls.forEach(vControl => {
vControl.disabled = false

if (event.target.value === 'block') {
if (vControl.classList.contains('flex-only') || vControl.classList.contains('flex-grid')) {
vControl.disabled = true
}
} else if (event.target.value === 'grid') {
if (vControl.classList.contains('flex-only')) {
vControl.disabled = true
}
}
})

parent.style.display = event.target.value;
})
})

valueControls.forEach(control => {
control.addEventListener('change', (event) => {
parent.style.alignContent = event.target.value;
})
})
</script>
</body>
</html>
31 changes: 17 additions & 14 deletions css/align-content/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "`align-content`"
description: "Как `justify-content`, но управляет целыми строками, а не отдельными флекс-элементами."
description: "Управляет распределением свободного пространства вокруг элементов по дополнительной оси."
baseline:
- group: flexbox
features:
Expand All @@ -11,6 +11,8 @@ baseline:
- css.properties.align-content.grid_context
authors:
- solarrust
contributors:
- cheremis88
editors:
- tachisis
keywords:
Expand All @@ -26,13 +28,13 @@ tags:

## Кратко

Свойство распределяет свободное пространство по поперечной оси между строками флекс-элементов.
Свойство распределяет свободное пространство по поперечной оси между строками элементов внутри флекс- и грид-контейнеров, а также внутри блочных элементов.

Работает практически как свойство [`justify-content`](/css/justify-content/), но управляет строками по поперечной оси.

## Пример

Строчки прижмутся к центру родителя по вертикали.
Строчки встанут по центру родителя по вертикали.

```css
.container {
Expand All @@ -49,23 +51,24 @@ tags:

## Как пишется

### Возможные значения

- `stretch` (значение по умолчанию) — строки растягиваются одинаково так, чтобы занять всё доступное пространство родителя.
- `flex-start` / `start` — все строки располагаются у начала поперечной оси. Первое значение не зависит от режима чтения текущего языка в то время как второе значение _смотрит_ на него.
- `flex-end` / `end` — все строки располагаются у конца поперечной оси. `end` смотрит на режим чтения текущего языка.
- `normal` (значение по умолчанию) — элементы располагаются так, будто свойство выравнивания не применено, на своих местах.
- `start` – строки располагаются в начале поперечной оси любого из допустимых контейнеров.
- `center` — строки выравниваются по центру родителя.
- `end` – – строки располагаются в конце поперечной оси любого из допустимых контейнеров.
- `stretch` — если элементам не задан строгий размер, то строки растягиваются одинаково так, чтобы занять всё доступное пространство родителя.
- `flex-start` — все строки располагаются у начала поперечной оси флекс-контейнера. Если блок не является флекс-контейнером, то значение читается браузером как `start`.
- `flex-end` — все строки располагаются у конца поперечной оси флекс-контейнера. Если блок не является флекс-контейнером, то значение читается браузером как `end`.
- `space-between` — первая строка прижимается к началу поперечной оси, последняя — к концу поперечной оси, а остальные располагаются так, чтобы свободное пространство было поделено на отступы между ними равномерно.
- `space-around` — отступы у каждой строки равнозначны отступам у любой другой строки.
- `space-evenly` — отступы между строками и от краёв родителя одинаковые.

## Подсказки
Значения `space-between`, `space-around`, `space-evenly` и `stretch` не сработают для блочных контейнеров.

💡 Свойство срабатывает, только если во флекс-контейнере больше одной строки элементов. А значит без `flex-wrap: wrap` работать не будет.
💡 Видимый эффект будет только если высота родителя больше чем суммарная высота всех элементов во всех рядах.
Блочному контейнеру должна быть задана высота, чтобы был эффект от использования свойства.

<aside>
<iframe title="Песочница" src="demos/all/" height="650"></iframe>

📝 Полный список свойств флексбоксов можно посмотреть в [гайде по flexbox](/css/flexbox-guide/).
## Подсказки

</aside>
💡 Свойство срабатывает, только если во флекс-контейнере больше одной строки элементов. А значит без `flex-wrap: wrap` работать не будет.
💡 Видимый эффект будет только если высота родителя больше чем суммарная высота всех элементов во всех рядах.
9 changes: 9 additions & 0 deletions people/cheremis88/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
name: 'Сергей Черемискин'
url: https://github.com/cheremis88
photo: photo.jpg
badges:
- first-contribution-small
---

Per aspera ad astra.
Binary file added people/cheremis88/photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading