Explanation

Sample layout

I recently met flexbox. I wanted to impose a layout using the flexs in the second image. I see exactly what I want to imprint. I created the first div that was given the display: flex property, put two more divas inside as I know they automatically become flex elements, so I did everything , but there was one trivial question, and the logo of the photo, etc. (content) are positioned in the same way as in the layout blocks? For example, to indent the logo you can use padding and margin inside the flex element? I apologize in advance for my skills in peinte

    1 answer 1

    padding and margin for flex elements are set the same as for block elements. Here the main rule is that all elements are lined up in a single line and, even if they do not fit in the container, they go beyond it. Elements in the container along the main axis are aligned with the justify-content property, along the transverse axis with align-items (not to be confused with align-content , which aligns the lines relative to the flex-container).