Flex display:flex; flex: 0 1 33.333%; in mobile screen does not work-CodePudding

I must make block__item I have html and css styles for html. Output must be: https://i.stack.imgur.com/gvpcm.png

   *{
        margin: 0;
        padding: 0;
    }

    .wrapper {
        display: flex;
        min-height: auto;
        background-color: red;
        flex-direction: column;
    }
            
    .container {
        max-width: 1200px;
        margin: auto;
        background-color: green;
        padding: 0 15px;
    }

    @media (max-width: 1200px) {
        .container{
            width: 970px;
        }
    }
    @media (max-width: 992px) {
        .container{
            width: 750px;
        }
    }
    @media (max-width: 767px) {
        .container{
            width: none;
        }
    }

    .block {
        margin: 0 0 30px 0;
    }

    .block__row {
        display: flex;
        margin: 0 -15px;
    }
    .block__column {
        flex: 0 1 33.333%;
        padding: 0 15px;
    } 
    
    .block__item {
        background-color: aqua;
        padding: 15px;
    }
    .block__img {
        background-color: yellow;
        padding: 0 0 60% 0;
        margin-bottom: 10px;
    }

    .block__txt {
        font-size: 24px;
        text-align: center;
        margin: 15px 15px;
    }
One requirement is we must not change code inside media queries for solving this problem.
Below you can see styles for css.
Also here are css styles as snippet:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div >
        <div >
            <div >
                <div >
                    <div >
                        <div >
                            <div ></div>
                            <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
                                expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
                            </div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <div ></div>
                            <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
                                expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
                            </div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <div ></div>
                            <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
                                expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>

</body>

</html>
=

Maybe flex must be flex: 1 0 33.33% for solving this problem? Please help!

Thank You !

CodePudding user response：

You can use flex-wrap property to achieve this. As soon as the screen reaches mobile size, the items will stack on top of each other.

*{
        margin: 0;
        padding: 0;
    }

    .wrapper {
        display: flex;
        min-height: auto;
        background-color: red;
        flex-direction: column;
    }
            
    .container {
        max-width: 1200px;
        margin: auto;
        background-color: green;
        padding: 0 15px;
    }

    @media (max-width: 1200px) {
        .container{
            width: 970px;
        }
    }
    @media (max-width: 992px) {
        .container{
            width: 750px;
        }
    }
    @media (max-width: 767px) {
        .container{
            width: none;
        }
    }

    .block {
        margin: 0 0 30px 0;
    }

    .block__row {
        display: flex;
        margin: 0 -15px;
        flex-wrap: wrap;
    }
    .block__column {
        flex: 0 1 auto;
        padding: 0 15px;
    } 
    
    .block__item {
        background-color: aqua;
        padding: 15px;
    }
    .block__img {
        background-color: yellow;
        padding: 0 0 60% 0;
        margin-bottom: 10px;
    }

    .block__txt {
        font-size: 24px;
        text-align: center;
        margin: 15px 15px;
    }
One requirement is we must not change code inside media queries for solving this problem.
Below you can see styles for css.
Also here are css styles as snippet:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div >
        <div >
            <div >
                <div >
                    <div >
                        <div >
                            <div ></div>
                            <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
                                expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
                            </div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <div ></div>
                            <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
                                expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
                            </div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <div ></div>
                            <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
                                expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>

</body>

</html>
=

CodePudding user response：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Box</title>
    <style>
        .three {
            /* width: 100%; */
            padding: 15px;
            flex-basis: 100%;
            background-color: blue;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }

        .three div {
            flex-basis: 30%;
            text-align: center;
            padding: 20px;
            border: 1px solid black;
            background-color: gray;
        }
    </style>
</head>

<body>

    <section >
        <div >
            1
        </div>
        <div >
            2
        </div>
        <div >
            3
        </div>
    </section>
</body>

</html>

You must try this piece of code where i have a main div 3 inside of which there are 3 subdive and on main div i applied flex and flex-wrap: wrap; which does the work for me soo for you!