Flexbox макет не работает как задумано

Question

у меня есть этот HTML

<div class="flex-container"> 
    <div class="flex-full">1</div> 
</div> 

<div class="flex-container"> 
    <div class="flex">2</div> 
    <div class="flex">3</div> 
    <div class="flex">4</div> 
</div> 

стилизованных этого CSS

*{ 
    margin:0; 
    padding:0; 
} 
    .flex-container{ 
     width: 90%; 
     max-width: 960px; 
     display: flex; 
     background-color: lightgray; 
     margin-left: auto; 
     margin-right: auto; 
     flex-wrap: wrap; 
    } 
    .flex-full{ 
     background-color: red; 
     flex: 1 0 100%; 
    } 
    .flex{ 
     background-color: blue; 
     flex: 1 0 90px; 
    } 

    @media screen and (max-width: 480px) { 
    .flex-container { 
     background-color: lightgreen; 
     width: 100%; 
    } 
} 
    @media screen and (max-width: 480px) { 
    .flex-container { 
     background-color: lightgreen; 
     width: 100%; 
    } 
} 

Но результат не по назначению. я постараюсь дать визуальное представление о проблеме (загрузка изображений не будет работать):

На ширине экрана 320px и ниже, я получаю следующий результат

111111111111111 
    222222233333333 
    444444444444444 

Что я ожидал было:

phone screen   bigger screen 
    111111111111111  111111111111111111 
    222222222222222  222222333333444444 
    333333333333333 
    444444444444444 

Я надеюсь, что он сделал Sence, пожалуйста, помогите мне :)

JSFiddle

Answer 1

Возможно, вы ищете flex-direction: column;?

на .flex-контейнер.

Answer 2

В Flex вы можете использовать justify-content и align-content для горизонтального и вертикального выравнивания соответственно.

Также flex-basis принимает те же значения, что и свойства ширины и высоты, и задает начальный основной размер элемента гибкости, прежде чем свободное пространство распределяется в соответствии с факторами гибкости.

.flex-container { 
    flex-direction:   row; 
    justify-content:  space-between; 
    align-content:   space-between; 
} 

.flex1, .flex4{ 
    flex-basis:    100%; 
} 

.flex2, .flex3{ 
    flex-basis:    50%; 
} 

@media screen and (max-width: 320px){ 

    .flex2, .flex3{ 
    flex-basis:    100%; 
    } 

} 

Вы также можете использовать width: 100% и width: 50% вместо этого, если flex-basis.