Use of flex in sub-items with different parent elements

Asked

Viewed 81 times

-1

Exemplo do flexbox usado

I’m using the flex to align all the items equally, however, the sub-items of each of them do not align equally, I used the stretch to align and gain the size according to the largest, but I don’t know how to make the elements inside the main items do the same among themselves, I wonder if there is some way, and how to do it, in detail so that I understand what to do instead of just copy and paste code without knowing how it works.

*I’ve researched the flex on several websites, yet I don’t know how to do it.

css flexbox
  • 2

    complicated answer something without even knowing how the code is.

  • This is just an illustration, I want to know how I do so that the sub-items, follow only their flex, and not the father, even with different parents, the idea is only for a base code with description, there is no point in a ready code.

  • 1

    What have you tried to do? has code?

  • not yet, but wanted a north to do

1 answer

1


I tried to reproduce your need only with div’s and flex to make a very lean and easy to understand code. Has a very good website to better understand how flex works: Flexy Boxes

inserir a descrição da imagem aqui

<html>
<body>
    <div class="panel-team">

        <div class="panel-player">
            <div class="panel-foto">
                <img src="https://nerdsnewsbr.files.wordpress.com/2014/02/8c216-superman-facebook-image.jpeg" class="tamanho-foto" />
            </div>
            <div class="panel-descricao">
                <h3>Superman</h3>
                Info 1<br />
                Info 2
            </div>
        </div>

        <div class="panel-player">
            <div class="panel-foto">
                <img src="https://nerdsnewsbr.files.wordpress.com/2014/02/abfaa-batman_avatar-e1263852269689.jpg" class="tamanho-foto" />
            </div>
            <div class="panel-descricao">
                <h3>Batman</h3>
                Info 1<br />
                Info 2<br />
                Info 3<br />
                Info 4<br />
                Info 5
            </div>
        </div>

        <div class="panel-player">
            <div class="panel-foto">
                <img src="https://nerdsnewsbr.files.wordpress.com/2014/02/e9ed1-facebook-art-no-photo-image-batman-mickey-mouse-spock-elvis-rick-roll4.jpg" class="tamanho-foto" />
            </div>
            <div class="panel-descricao">
                <h3>Spock</h3>
                Info 1
            </div>
        </div>

    </div>

    <style>
        .panel-team {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        .panel-player {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 10px;
        }
        .panel-foto {
            padding-bottom: 7px;
            flex: 0 1 auto;
            align-self: stretch;
        }
        .panel-descricao {
            color: white;
            background-color: black;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content:center;
            align-items: center;
            flex: 1 1 auto; 
        }
        .tamanho-foto {
            height: 319px;
        }
    </style>
</body>
</html>

Browser other questions tagged css flexbox

You are not signed in. Login or sign up in order to post.