Почему с помощью Flex-box я не могу перенести колонки с классом .logo__wrap одну под другую,flex-wrap не отрабатывает?

Question

[MihailDonskoy]

<div class="company__logo">
                    <div class="logo__wrap">
                        <section class="wrap__block">
                            <div class="block__sub-block">
                                <div class="sub-block__img-wrap">
                                    <img src="images/at.jpg" class="img-wrap__img" alt="at&#38;t logo">
                                </div>
                                <div class="sub-block__img-wrap">
                                    <img src="images/toshiba.jpg" class="img-wrap__img" alt="toshiba logo">
                                </div>
                            </div>
                            <div class="block__sub-block">
                                <div class="sub-block__img-wrap">
                                    <img src="images/ibm.jpg" class="img-wrap__img" alt="ibm logo">
                                </div>
                                <div class="sub-block__img-wrap">
                                    <img src="images/dell.jpg" class="img-wrap__img" alt="dell logo">
                                </div>
                            </div>
                        </section>
                        <section class="wrap__block">
                            <div class="block__sub-block">
                                <div class="sub-block__img-wrap">
                                    <img src="images/apple_logo.jpg" class="img-wrap__img" alt="apple logo">
                                </div>
                                <div class="sub-block__img-wrap">
                                    <img src="images/microsoft.jpg" class="img-wrap__img" alt="microsoft logo">
                                </div>
                            </div>
                            <div class="block__sub-block">
                                <div class="sub-block__img-wrap">
                                    <img src="images/intel.jpg" class="img-wrap__img" alt="intel logo">
                                </div>
                                <div class="sub-block__img-wrap">
                                    <img src="images/amd.jpg" class="img-wrap__img" alt="amd logo">
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="logo__wrap">
                        <section class="wrap__block">
                            <div class="block__sub-block">
                                <div class="sub-block__img-wrap">
                                    <img src="images/cisco.jpg" class="img-wrap__img" alt="cisco logo">
                                </div>
                                <div class="sub-block__img-wrap">
                                    <img src="images/panasonic.jpg" class="img-wrap__img" alt="panasonic logo">
                                </div>
                            </div>
                            <div class="block__sub-block">
                                <div class="sub-block__img-wrap">
                                    <img src="images/lenovo.jpg" class="img-wrap__img" alt="lenovo logo">
                                </div>
                                <div class="sub-block__img-wrap">
                                    <img src="images/asus.jpg" class="img-wrap__img" alt="asus logo">
                                </div>
                            </div>
                        </section>
                        <section class="wrap__block">
                            <div class="block__sub-block">
                                <div class="sub-block__img-wrap">
                                    <img src="images/nokia.jpg" class="img-wrap__img" alt="nokia logo">
                                </div>
                                <div class="sub-block__img-wrap">
                                    <img src="images/samsung.jpg" class="img-wrap__img" alt="samsung logo">
                                </div>
                            </div>
                            <div class="block__sub-block">
                                <div class="sub-block__img-wrap">
                                    <img src="images/nec.jpg" class="img-wrap__img" alt="nec logo">
                                </div>
                                <div class="sub-block__img-wrap">
                                    <img src="images/kaspersky_logo.jpg" class="img-wrap__img" alt="kaspersky logo">
                                </div>
                            </div>
                        </section>
                    </div>
                </div>

.company__logo{
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
    width:100%;
}

.logo__wrap{
    display: flex;
    flex-flow: row nowrap;
    width: 50%;
}

.wrap__block{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width:50%;
}

.block__sub-block{
    border: 1px solid red;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
}

.sub-block__img-wrap{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    border: 1px solid blue;
    padding: 10px 15px 10px 15px;
    width: 35%;
}
.img-wrap__img{
    height: 20px;
    max-width: 60px;
    width: auto;
}

Comments

[Максим Софронов]

Оформляйте код на CodePen, пожалуйста. Ни у кого нет особого желания выявлять проблему на глаз.

[Ankhena]

В смысле "не можете"?
Вот ваш код: https://jsfiddle.net/kyzh4anq/ и блоки на разных строчках. Что не так?

Answer 1

[Иван]

.logo__wrap{
    display: flex;
    flex-flow: row <b>nowrap;</b>
    width: 50%;
}

Comments

[MihailDonskoy]

что это?

[Иван]

MihailDonskoy: у вас тут nowrap стоит ,из-за чего и не получается перенести:)

[MihailDonskoy]

у родительского контейнера врап стоит,значит все что внутри него будет переноситься

[MihailDonskoy]

а у этого мне не надо чтоб переносились