Почему не работает stretch во flex контейнере?

@Fatmarmelad · Регистрация: 20.02.2016

Author24 — интернет-сервис помощи студентам

Доброго времени суток!
Помогите решить проблему, почему не работает значение stretch. Блоки в контейнере должны растягиваться,
но этого не происходит.

HTML5

<body>
    <div class="flx-container">
        <div class="son">Что делать?</div>
        <div class="son">Что делать?</div>  
    </div>
</body>

CSS

1
2
3

 .flx-container{display:flex;
        justify-content:space-around; align-items:stretch;}
        .son{background-color:blueviolet;}

@wwowa · 24.09.2018, 22:35

Задайте блокам

CSS

1	flex-grow: :1;

или просто

CSS

1	flex-basis: 50%;

это зачем, когда на всю ширину??

CSS

1	justify-content:space-around;

а это вроде как по вертикали тянет?

CSS

1	align-items:stretch;

@Fatmarmelad · 24.09.2018, 22:46 **[ТС]**

wwowa, я хотел растянуть блоки по вертикали на всю высоту окна. Если

CSS

1	justify-content:space-around;

то stretch не должен работать?

@wwowa · 24.09.2018, 23:04

Сообщение от Fatmarmelad

не должен работать

Должен. Просто я про горизонталь думал. Тогда что то типа такого. Что тянуть по высоте, если тянуть то нечего?

CSS

body, html{
height: 100%;
background-color:red;
padding: 15px;
}
.flx-container{
    justify-content:space-around;
    display:flex;
    height: 100%;
    background-color: green;
    padding: 15px;
 
}
.son{
 background-color:blueviolet;}

	24.09.2018, 23:04

Опции темы