Как я могу создать расстояние между элементами во flexbox? ⇐ CSS

[Anonymous]

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

Код: Выделить всё

.latest-news-format {
background-color: #8ebfa1;
display: flex;
justify-content: space-around;
align-items: stretch;
gap: 10px;
}

.latest-news-format div {
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
max-height: 100%;
border: 1px solid black;
}

.latest-news-format div img {
/* max-width: 100%; */
object-fit: cover;
max-height: 80%;
max-width: 100%;
/* aspect-ratio: 16/9; */
}

.latest-news-format div p {
text-align: center;
/* This centers the text within each div */
margin-bottom: auto;
/* This pushes the text to the bottom of the div */
}

.latest-news-format div iframe {
/* object-fit: cover; */
flex-grow: 1;
flex-shrink: 1;
aspect-ratio: auto;
margin: auto;
}

Код: Выделить всё

Latest News






[url=https://www.soompi.com/article/1598908wpp/ikons-jinhwan-announces-military-enlistment-date-with-heartfelt-message]
[img]https://picsum.photos/200/300.webp[/img]

iKON Jinhwan Enlistment Announcement with Heartfelt Letter

[/url]



[url=https://www.soompi.com/article/1648474wpp/seventeen-to-headline-lollapalooza-berlin-2024]
[img]https://picsum.photos/200/300.webp[/img]
SEVENTEEN Perform At Lollapalooza Berlin
[/url]



[youtube]4g6AC6mXShE[/youtube]

[url=https://youtu.be/4g6AC6mXShE?si=bxoYJBNyIaxXMNCp]

Watch: Going SEVENTEEN New Episode 79 - Going Vol 2

[/url]



[url=https://www.soompi.com/article/1649391wpp/ncts-taeyong-confirms-military-enlistment-date]
[img]https://picsum.photos/200/300.webp[/img]

SM Confirms Taeyong Military Enlistment Date

[/url]

ожидайте, что все img/iframe (встроенное видео) будут иметь одинаковую ширину , полностью растянутый по горизонтали внутри флексбокса, равной высоты. между дочерним флексбоксом должен быть пробел

Подробнее здесь: https://stackoverflow.com/questions/781 ... in-flexbox