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

Question

SheikhRamil @ramil_bayramov

Your Personal Sheikh

HTML
CSS

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

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

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

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

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

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

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 = всей высоте страницы

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

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

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

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

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

HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 8 часов назад
- 52 просмотра
1

ответ
HTML

+3 ещё

Простой
Где и как найти переменные локальной игры на html5?
- 1 подписчик
- 17 часов назад
- 68 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- 20 часов назад
- 69 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 202 просмотра
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 110 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 111 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 112 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 80 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 62 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Верстка магазина на opencart + юкасса

26 нояб. 2024, в 12:58

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

Настроить BLE стек на чипе NRF52840

26 нояб. 2024, в 12:56

1500 руб./в час

Сделать одностраничный сайт

26 нояб. 2024, в 12:53

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

Наполни блоки разным количеством контента
Ты не скриншотами нас корми, а рабочий код твой давай.
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; что делать?

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

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

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