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

Question

SheikhRamil @ramil_bayramov

Your Personal Sheikh

HTML
CSS

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

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

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

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

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

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

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)

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

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

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

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

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

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

CSS

Простой
Как сверстать кастомную пунктирную обводку у блока?
- 1 подписчик
- 21 час назад
- 108 просмотров
1

ответ
CSS

Простой
Можно ли использовать функцию calc() в медиазапросах?
- 1 подписчик
- 13 нояб.
- 172 просмотра
1

ответ
HTML

+1 ещё

Простой
Как реализовать форму ввода как в веб-версии chatGPT?
- 1 подписчик
- 13 нояб.
- 145 просмотров
0

ответов
CSS

+1 ещё

Простой
Как оптимизировать svg картинку?
- 1 подписчик
- 11 нояб.
- 139 просмотров
1

ответ
CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 06 нояб.
- 163 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 223 просмотра
1

ответ
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 183 просмотра
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 143 просмотра
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 106 просмотров
1

ответ
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 184 просмотра
0

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

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

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 000 $

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

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

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

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

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