Flex-flex-базисное значение в процентах, не дающее ожидаемых результатов - PullRequest
Новая
       22

Flex-flex-базисное значение в процентах, не дающее ожидаемых результатов

0 голосов
/ 24 сентября 2018

Я пытаюсь построить базовый уровень адаптивного дизайна с использованием мобильного подхода.

Итак, я добавил код для двух блоков (заголовок и сосед) внутри контейнера flex-boxparent (body)

Вместо того, чтобы назначать абсолютные значения в px / em / rem для ширины, я предоставил flex-based в процентах.

Теперь у меня есть две проблемы с кодом

a.Даже я применяю flex-wrap: wrap в мобильном представлении для родителя, хотя потомок переносится вниз, но есть большой разрыв в первом дочернем элементе (заголовок) и втором дочернем элементе (сосед).Я не уверен, почему между ними так много пустого пространства, где вместо этого черный ящик (первый дочерний элемент aka - header) должен располагаться сверху второго дочернего элемента (aka-сосед).

б.flex-wrap не работает для размеров iPhone в инструментах разработчика Google, а именно.414x736.В медиа-запросе я предоставил родителю этих двух потомков свойство - flex-wrap: wrap, но оно не применяется 

* {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    text-decoration: none;
    display: flex;
    /* height:100vh; */
}

.header {
    /* width:20%; */
    /* height:20%; */
    /* min-width: 192px; */
    /* min-height: 200px; */
    height: 20%;
    flex-grow: 0;
    display: flex;
    background-color: black;
    /* width: 100%; */
    overflow: auto;
    flex: 1;
    flex-basis: 100%;
    height: 20%;
}

@media only screen and (max-width: 420px) and (max-height:750px) {
    body {
        flex-wrap: wrap;
    }
    .header {
        flex-basis: 600px;
        flex-wrap:wrap;
        /* flex: 1; */
    }
    .neighbour {
        flex-basis: 300px;
        display: flex;
        justify-content: center;
        flex:0;
    }
}

.neighbour {
    height: 20%;
    background-color: red;
    /* flex-basis:200px; */
    flex: 1;
    flex-basis: 50%;
}

.header>.icon {
    /* width: 100px; */
    /* flex:1; */
    background-color: pink;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 2;
    flex-basis: 40%;
    /* flex-shrink: 5; */
}

.header>.icon>img {
    width: 50%;
    height: 49%;
    /* flex:1; */
    /* background-color:pink; */
}

.header>.menu {
    /* width: 400px; */
    background-color: grey;
    padding: 2em;
    flex: 4;
    flex-basis: 80%;
}

.grandfather {
    /* position: absolute; */
    /* left:0; */
    top: 0;
    /* bottom:0; */
    background-color: orange;
    height: 25vh;
    float: right;
    /* width:75%; */
    flex-basis: 750px;
    display: flex;
    flex-grow: 1;
}

.father {
    float: left;
    height: 50%;
    /* width:50%; */
    background-color: blue;
    flex-shrink: 2;
    flex-basis: 600px;
    border: 1px solid white;
}

.father.second {
    flex-shrink: 4;
    background-color: white !important;
}

.son {
    float: left;
    height: 50%;
    width: 50%;
    background-color: green;
    flex-shrink: 0;
    flex-basis: 50%;
}
<html>
<link rel="stylesheet" href="style.css">

<body>

    <div class="header">
        <!-- <div class="icon">
            <img src="test.jpeg">

        </div>
        <div class="menu">
            <ul>
                <li>home</li>
                <li>city</li>
                <li>offers</li>
            </ul>
        </div>

        <div class="icon">
            <img src="test.jpeg">

        </div> -->

    </div>



    <div class="neighbour">

    </div>
</body>


<!-- <div class="grandfather">

        <div class="father">
            <div class="son">

            </div>
        </div>
        <div class="father  second">
            <div class="son">

            </div>
        </div>
    </div> -->





</html>

* {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    text-decoration: none;
    display: flex;
    /* height:100vh; */
}

.header {
    /* width:20%; */
    /* height:20%; */
    /* min-width: 192px; */
    /* min-height: 200px; */
    height: 20%;
    flex-grow: 0;
    display: flex;
    background-color: black;
    /* width: 100%; */
    overflow: auto;
    flex: 1;
    flex-basis: 100%;
    height: 20%;
}

@media only screen and (max-width: 420px) and (max-height:750px) {
    body {
        flex-wrap: wrap;
    }
    .header {
        flex-basis: 600px;
        flex-wrap:wrap;
        /* flex: 1; */
    }
    .neighbour {
        flex-basis: 300px;
        display: flex;
        justify-content: center;
        flex:0;
    }
}

.neighbour {
    height: 20%;
    background-color: red;
    /* flex-basis:200px; */
    flex: 1;
    flex-basis: 50%;
}

.header>.icon {
    /* width: 100px; */
    /* flex:1; */
    background-color: pink;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 2;
    flex-basis: 40%;
    /* flex-shrink: 5; */
}

.header>.icon>img {
    width: 50%;
    height: 49%;
    /* flex:1; */
    /* background-color:pink; */
}

.header>.menu {
    /* width: 400px; */
    background-color: grey;
    padding: 2em;
    flex: 4;
    flex-basis: 80%;
}

.grandfather {
    /* position: absolute; */
    /* left:0; */
    top: 0;
    /* bottom:0; */
    background-color: orange;
    height: 25vh;
    float: right;
    /* width:75%; */
    flex-basis: 750px;
    display: flex;
    flex-grow: 1;
}

.father {
    float: left;
    height: 50%;
    /* width:50%; */
    background-color: blue;
    flex-shrink: 2;
    flex-basis: 600px;
    border: 1px solid white;
}

.father.second {
    flex-shrink: 4;
    background-color: white !important;
}

.son {
    float: left;
    height: 50%;
    width: 50%;
    background-color: green;
    flex-shrink: 0;
    flex-basis: 50%;
}
<html>
<link rel="stylesheet" href="style.css">

<body>

    <div class="header">
        <!-- <div class="icon">
            <img src="test.jpeg">

        </div>
        <div class="menu">
            <ul>
                <li>home</li>
                <li>city</li>
                <li>offers</li>
            </ul>
        </div>

        <div class="icon">
            <img src="test.jpeg">

        </div> -->

    </div>



    <div class="neighbour">

    </div>
</body>


<!-- <div class="grandfather">

        <div class="father">
            <div class="son">

            </div>
        </div>
        <div class="father  second">
            <div class="son">

            </div>
        </div>
    </div> -->





</html>

Это очень простой код, и он просто пытается создать гибкую адаптивную конструкцию, используя flex-box, но не может этого достичь.

...