Не работает flex-direction: row; что делать?

Question

SheikhRamil @ramil_bayramov

Your Personal Sheikh

HTML
CSS

Не работает flex-direction: row; что делать?

есть квадраты, я хочу чтобы они были вот так

оно делается таким образом(на родительского) или нет?:

display: flex;
flex-direction: row;
align-items: flex-end;

то есть чтобы снизу были, но не получается

Вопрос задан более трёх лет назад
892 просмотра

9 комментариев

Подписаться 1 Простой 9 комментариев

Froggyweb @Froggyweb

Наполни блоки разным количеством контента

Написано более трёх лет назад
Aetae @Aetae

Ты не скриншотами нас корми, а рабочий код твой давай.

Написано более трёх лет назад

SheikhRamil @ramil_bayramov Автор вопроса

Aetae,

<!DOCTYPE html>
<html>
    <head>
        <script>
            
        </script>
        <style>
            .all {
                display: flex;
                flex-direction: row;
                align-items: flex-end;
                color: darkblue;
                border: 1px solid;
                height: 100;
            }
            .f1 {
                background: red;
                width: 100px;
                height: 100px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                height: 100;
                display: flex;
                flex-direction: row;
                align-items: flex-end;
            }
            .s2 {
                background: lightgreen;
                width: 100px;
                height: 100px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                

            }
            .t3 {
                background: yellow;
                width: 100px;
                height: 100px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                justify-content: center;
                align-items: center;
                display: flex

            }
            .f4 {
                background: blue;
                width: 100px;
                height: 100px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                justify-content: center;
                align-items: center;
                display: flex;
            }
        </style>       
    </head>
    <body>
        <div class="all">
            <div class="f1">1</div>
            <div class="s2">2</div>
            <div class="t3">3</div>
            <div class="f4">4</div>
        </div>
    </body>
</html>

Написано более трёх лет назад

SheikhRamil @ramil_bayramov Автор вопроса

posters, написал ничего не изменилось

Написано более трёх лет назад
posters @posters

Ramil_ Bayramov_, неверно понял вашу задачу, извините.

Написано более трёх лет назад
Aetae @Aetae

height: 100; -> height: 300px;

Написано более трёх лет назад
SheikhRamil @ramil_bayramov Автор вопроса

не какого сверхьественного

Написано более трёх лет назад

SheikhRamil @ramil_bayramov Автор вопроса

<style>
            .all {
                display: flex;
                align-items: flex-end;
                color: darkblue;
                height: 100%;
            }
            .f1 {
                background: red;
                width: 100px;
                height: 105px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                height: 100px;
                align-items: flex-end;
            }
            .s2 {
                background: lightgreen;
                width: 100px;
                height: 110px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                

            }
            .t3 {
                background: yellow;
                width: 100px;
                height: 120px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                align-items: center;

            }
            .f4 {
                background: blue;
                width: 100px;
                height: 140px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                align-items: center;
            }
        </style>       
    </head>
    <body>
        <div class="all">
            <div class="f1">1</div>
            <div class="s2">2</div>
            <div class="t3">3</div>
            <div class="f4">4</div>
        </div>
    </body>
</html>

Написано более трёх лет назад

SheikhRamil @ramil_bayramov Автор вопроса

Froggyweb, причем тут это, цифры и так достаточно для контента (если что попробовал, nothing)

Написано более трёх лет назад

Решения вопроса 1

5 комментариев

SheikhRamil @ramil_bayramov Автор вопроса

вы не поняли мне нужно чтобы квадраты были самом внизу экрана браузера а не бордера

Написано более трёх лет назад

SheikhRamil @ramil_bayramov Автор вопроса

<style>
            .all {
                display: flex;
                align-items: flex-end;
                color: darkblue;
                height: 100%;
            }
            .f1 {
                background: red;
                width: 100px;
                height: 100px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                height: 100px;
                align-items: flex-end;
            }
            .s2 {
                background: lightgreen;
                width: 110px;
                height: 100px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                

            }
            .t3 {
                background: yellow;
                width: 100px;
                height: 120px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                align-items: center;

            }
            .f4 {
                background: blue;
                width: 100px;
                height: 140px;
                border: 2px solid;
                border-radius: 5px;
                margin: 5px;
                align-items: center;
            }
        </style>       
    </head>
    <body>
        <div class="all">
            <div class="f1">1</div>
            <div class="s2">2</div>
            <div class="t3">3</div>
            <div class="f4">4</div>
        </div>
    </body>
</html>

Написано более трёх лет назад

hellcaster @web_Developer_Victor

Ramil_ Bayramov_, так?
snippet

Написано более трёх лет назад
SheikhRamil @ramil_bayramov Автор вопроса

hellcaster, да, а что означает min-height: 100vh; ?

Написано более трёх лет назад
hellcaster @web_Developer_Victor

Ramil_ Bayramov_, минимальная высота body = всей высоте страницы

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 7 часов назад
- 18 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 8 часов назад
- 25 просмотров
1

ответ
HTML

+1 ещё

Средний
Как поместить картинку рядом с текстом?
- 1 подписчик
- 11 часов назад
- 57 просмотров
1

ответ
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 15 часов назад
- 65 просмотров
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 19 часов назад
- 537 просмотров
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- вчера
- 1867 просмотров
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- вчера
- 61 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- вчера
- 201 просмотр
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- вчера
- 59 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- вчера
- 180 просмотров
1

ответ
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Анимация логотипа

24 апр. 2024, в 00:08

20000 руб./за проект

Разработка дизайна раздела «Статьи» на сайте «Мир отходов»

23 апр. 2024, в 23:01

10000 руб./за проект

Дизайн личного кабинета (клиентская часть)

23 апр. 2024, в 22:37

500 руб./в час

Наполни блоки разным количеством контента
Ты не скриншотами нас корми, а рабочий код твой давай.
Aetae,
<!DOCTYPE html> <html> <head> <script> </script> <style> .all { display: flex; flex-direction: row; align-items: flex-end; color: darkblue; border: 1px solid; height: 100; } .f1 { background: red; width: 100px; height: 100px; border: 2px solid; border-radius: 5px; margin: 5px; height: 100; display: flex; flex-direction: row; align-items: flex-end; } .s2 { background: lightgreen; width: 100px; height: 100px; border: 2px solid; border-radius: 5px; margin: 5px; } .t3 { background: yellow; width: 100px; height: 100px; border: 2px solid; border-radius: 5px; margin: 5px; justify-content: center; align-items: center; display: flex } .f4 { background: blue; width: 100px; height: 100px; border: 2px solid; border-radius: 5px; margin: 5px; justify-content: center; align-items: center; display: flex; } </style> </head> <body> <div class="all"> <div class="f1">1</div> <div class="s2">2</div> <div class="t3">3</div> <div class="f4">4</div> </div> </body> </html>
posters, написал ничего не изменилось
Ramil_ Bayramov_, неверно понял вашу задачу, извините.
<style> .all { display: flex; align-items: flex-end; color: darkblue; height: 100%; } .f1 { background: red; width: 100px; height: 105px; border: 2px solid; border-radius: 5px; margin: 5px; height: 100px; align-items: flex-end; } .s2 { background: lightgreen; width: 100px; height: 110px; border: 2px solid; border-radius: 5px; margin: 5px; } .t3 { background: yellow; width: 100px; height: 120px; border: 2px solid; border-radius: 5px; margin: 5px; align-items: center; } .f4 { background: blue; width: 100px; height: 140px; border: 2px solid; border-radius: 5px; margin: 5px; align-items: center; } </style> </head> <body> <div class="all"> <div class="f1">1</div> <div class="s2">2</div> <div class="t3">3</div> <div class="f4">4</div> </div> </body> </html>
Froggyweb, причем тут это, цифры и так достаточно для контента (если что попробовал, nothing)

Answer 1 · 2020-08-09 21:16:00

hellcaster @web_Developer_Victor

Что такое google?

Просто задайте разную высоту элементам внутри. И за умолчанием в flex контейнеров свойство flex-direction равно row

Ответ написан более трёх лет назад

5 комментариев

Не работает flex-direction: row; что делать?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт