Home>
/* Container
=================== * /
.container {
    width: 100%;
    Max-width: 1200px;
    Margin: 0 AUTO;
    Padding: 0 15px;
}
/*===== article===== * /
.article__Image {
    Position: Absolute;
    width 300px;
    HEIGHT: 300px;
    Top: 50%;
    Left: 50%;
    z-index: 1;
    TRANSFORM: TRANSLATE (-50%, -90%);
}
.article {
    margin-top: 80px;
    margin-left: 20px;
    margin-right: 100px;
    Margin-Bottom: 10px;
    Box-shadow: 1px 1px 10px RGBA (0, 0, 0, 0.1);
    HEIGHT: 600PX;
    width: 500px;
    DISPLAY: Flex;
    Flex-Wrap: Wrap;
    Position: relative;
    Background: RGB (97,7,244);
    Background: linear-gradient (90deg, RGBA (97,7,244,1) 0%, RGBA (140,14,230,1) 100%);
    Justify-Content: Center;
    Align-Items: Center;
    Transition: .3s linear;
}
.article: Hover {
    Box-shadow: 1px 1px 10px RGBA (0, 0, 0, .3);
}
.container {
    Padding: 10px;
    width: 400px;
    Height: 50px;
}
.article__Title {
    CURSOR: DEFAULT;
    Color: #FFF;
    Font-Size: 26px;
    margin-top: 70px;
    margin-left: 100px;
    Transition: 0.3s Linear;
}
.article__Title: Hover {
    TRANSFORM: scale (1.1);
    Text-Shadow: 1px 1px 10px RGBA (0, 0, 0, 0.5);
}
.article__Text {
    Color: #FFF;
    Font-Size: 17px;
    margin-top: 10px;
}
/* /===== article===== * /
<
! DOCTYPE HTML >
≪
HTML >
≪
HEAD >
    ≪
Meta Charset= "UTF-8" >
    ≪
Title >
Projects <
/title >
≪
/Head >
≪
Body >
    ≪
div class= "back" >
        ≪
a href= "../index.html" class= "back__Text" >
Back <
/a >
    ≪
/div >
    ≪
article class= "article" >
        ≪
DIV Class= "Container" >
                ≪
img src= "../assets /img /ava.jpg" alt= "" class= "article__image" >
                ≪
h1 class= "article__title" >
Lorem Ipsum. ≪
/h1 >
                ≪
p class= "article__text" >
Lorem Ipsum Dolor Sit Amet, Consertetur Adipisicing ELIT. AT Distinctio, Nulla Soluta Voluptatem in Nemo Sequi Amet! Optio, Repellendus! Excepturi Reiciendis, Perspiciatis Voluptatum Impedit Expedita Quo Vero Inventore IPSA, Sint. ≪
/P >
        ≪
/div >
    ≪
/article >
    ≪
article class= "article" >
        ≪
DIV Class= "Container" >
                ≪
img src= "../assets /img /ava.jpg" alt= "" class= "article__image" >
                ≪
h1 class= "article__title" >
Lorem Ipsum. ≪
/h1 >
                ≪
p class= "article__text" >
Lorem Ipsum Dolor Sit Amet, Consertetur Adipisicing ELIT. AT Distinctio, Nulla Soluta Voluptatem in Nemo Sequi Amet! Optio, Repellendus! Excepturi Reiciendis, Perspiciatis Voluptatum Impedit Expedita Quo Vero Inventore IPSA, Sint. ≪
/P >
        ≪
/div >
    ≪
/article >
    ≪
article class= "article" >
        ≪
DIV Class= "Container" >
                ≪
img src= "../assets /img /ava.jpg" alt= "" class= "article__image" >
                ≪
h1 class= "article__title" >
Lorem Ipsum. ≪
/h1 >
                ≪
p class= "article__text" >
Lorem Ipsum Dolor Sit Amet, Consertetur Adipisicing ELIT. AT Distinctio, Nulla Soluta Voluptatem in Nemo Sequi Amet! Optio, Repellendus! Excepturi Reiciendis, Perspiciatis Voluptatum Impedit Expedita Quo Vero Inventore IPSA, Sint. ≪
/P >
        ≪
/div >
    ≪
/article >
    ≪
article class= "article" >
        ≪
DIV Class= "Container" >
                ≪
img src= "../assets /img /ava.jpg" alt= "" class= "article__image" >
                ≪
h1 class= "article__title" >
Lorem Ipsum. ≪
/h1 >
                ≪
p class= "article__text" >
Lorem Ipsum Dolor Sit Amet, Consertetur Adipisicing ELIT. AT Distinctio, Nulla Soluta Voluptatem in Nemo Sequi Amet! Optio, Repellendus! Excepturi Reiciendis, Perspiciatis Voluptatum Impedit Expedita Quo Vero Inventore IPSA, Sint. ≪
/P >
        ≪
/div >
    ≪
/article >

I need that the elements are transferred to a new line and retained their centering properties, and this does not happen, why? (they just "fly away")

I do not understand why the page on the stack is displayed so, that's how it looks like me: imgur.com/a/qijqo4y

KLEYZYツ2021-07-23 17:30:10

And where did you decide that the child elements do not have any "centering properties" at all? Flex is not inherited. Obviously problems with the styles of their common container.

Инквизитор2021-07-23 17:30:10

Could you help me please? I do not get you. It seems to be Justify-Content and Align-Items

KLEYZYツ2021-07-23 17:30:10

These properties work on the container that they were asked. Daughters do not inherit them. In addition, you do not have all the code here, there is clearly something else is set somewhere, but the screenshot will definitely fail.

Инквизитор2021-07-23 17:30:10

HTML -pastebin.com/d7c67ukg, css -pastebin.com/t33uhku4, please look

KLEYZYツ2021-07-23 17:30:10