Use of flex in sub-items with different parent elements

Question

Use of flex in sub-items with different parent elements

Navigation

#1 by (1 votes)

-1

I'm using flex to align the items all equally, however, the sub-items of each of them do not align equally, I used the stretch to align and gain size according to the larger, but I do not know how I do so that the elements inside the main items do the same to each other only, I would like to know if there is any way, and how to do it, in a detailed way so that I understand what to do instead of just copying and pasting code without know how it works.

* I've researched flex on many sites, but I do not know how to do it.

css flexbox

asked by anonymous 21.12.2016 / 17:16

1 answer

How to enter decimal places directly after user type comma with Javascript? Error generating apk in the ionic framework v 1

score 1 · Accepted Answer

I tried to reproduce your need only with div's and flex to make a clean and easy-to-understand code. You have a very good site to better understand how flex works: Flexy Boxes

<html><body><divclass="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>