Комментарии пользователя SheikhRamil

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

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

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

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

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

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

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

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

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

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>

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

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

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

Как сделать text по центру в псевдоэлементе :after?

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

псевдоэлемент ::after нужен был для первой рамки(красный) и через content: "Hello" разместить в центре (практиковался)

.div::after {
                content: "Hello";
                top: 37px;
                left: 28px;
                right: auto;
                position: absolute;

my code

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

Как сделать text по центру в псевдоэлементе :after?

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

Уже не важно, thanks for help

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

Как сделать text по центру в псевдоэлементе :after?

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

div::after {
  content: "text";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  background: url(https://image.flaticon.com/icons/svg/33/33587.svg) no-repeat center / 100%;
}

Я переименовал класс "block" на div::after - и все заработало точно также!
А можете сказать для чего нужен {

display: flex;
align-items: center;
justify-content: center;

}

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

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