Example

Now I use this method:

<div class="logo"> <img class="avatar" src="..."> <div class="text"> <p class="title">...</p> <p class="subtitle">...</p> </div> </div>

Those. The text class serves as a wrapper for title and subtitle . The wrapper is located to the right of the image, and then inside it there are two blocks of text one after another vertically.

The question arose: is it possible to somehow do the same using auto margins, align-self and other similar useful things, such as flexbox-related things, but without a wrapper?

Without using absolute positioning and other techniques.

Thank.

  • how to understand without a wrapper? You also have a gray element! - user33274
  • .title Lensky, I mean a wrapper for .title and .subtitle - zhurof

2 answers 2

You can columnar flex, but there are dances with height, so it’s better with a wrapper.

 *{ box-sizing:border-box; } p{ margin:0; } .logo{ display:flex; flex-direction:column; flex-wrap:wrap; justify-content:space-between; align-content:flex-start; height:100px; } .avatar{ width:100px; height:100px; background-color:#acd; margin:0 15px 0 0; } .title,.subtitle{ border:1px solid; padding:5px 10px; background-color:#cda; width:calc(100% - 115px); } 
 <div class="logo"> <img class="avatar" src="..."> <p class="title">...</p> <p class="subtitle">...</p> </div>

    You can do it beautifully and universally on grids, with some limited foldbox on flexbox (flexbox code from the next example).

     * { box-sizing: border-box; } p { margin: 0; } .logo { display: grid; grid-template-columns: 100px auto; grid-gap: 20px; background-color: #f0f0f0; padding: 20px; } .avatar { width: 100px; height: 100px; background-color: #fff; border: 1px solid #ccc; grid-column: 1; grid-row: span 2; } .title, .subtitle { border: 1px solid #ccc; padding: 0 10px; background-color: #fff; grid-column: 2; display: flex; align-items: center; } @supports not (display: grid) { .logo { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; height: 100px; } .avatar { width: 100px; height: 100px; margin: 0 15px 0 0; } .title, .subtitle { padding: 5px 10px; width: calc(100% - 115px); } } 
     <div class="logo"> <img class="avatar" src="..."> <p class="title">Title</p> <p class="subtitle">Subtitle</p> </div>

    • In the @supports directive @supports better to @supports styles with the grid , since browsers that support the css grid certainly support @supports , and vice versa - not a fact. IE10 example: grids do not support, flexs in @supports do not see, although they support them. - zhurof
    • It is possible and as you described, it all depends on the approach. Detection of grids is possible not only through @supports , although this is a more appropriate approach) - Sasha Omelchenko