Не удается сделать этот макет flexbox достаточно отзывчивым

Question

У меня есть немного сложный макет, созданный с помощью flexbox, у меня проблема с отзывчивым, это не работает с отзывчивым:

section {
	 max-width: 740px;
	 margin: 0 auto;
	 display: flex;
}
 .column {
	 margin: 10px;
	 flex-grow: 1;
	 flex-shrink: 1;
	 flex-basis: 0;
}
 section:nth-of-type(5) .column:first-of-type {
	 flex-grow: 2;
	 flex-shrink: 2;
	 flex-basis: 22px;
}
 section:nth-of-type(6) .column:nth-of-type(2) {
	 flex-grow: 4;
	 flex-shrink: 4;
	 flex-basis: 66px;
}
/* OTHER STYLES */
 html, body {
	 height: 100%;
	 box-sizing: border-box;
}
 body {
	 font-family: 'Raleway', sans-serif;
	 padding: 10px;
	 background: linear-gradient(135deg, #b04, #f80) fixed;
}
 .column {
	 padding: 10px 0;
	 background-color: rgba(255, 0, 0, 0.25);
	 text-align: center;
	 border: 1px solid rgba(255, 255, 255, 0.75);
	 background-color: rgba(255, 255, 255, 0.2);
	 color: rgba(255, 255, 255, 0.9);
}
 

<section>
  <div class="column">aa</div> 
</section>

<section>
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  
</section>

<section>
  <div class="column">aa</div> 
</section>


<section>
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  
</section>

<section>
  <div class="column">aa</div> 
</section>

<section>
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
 
</section>

Я пытаюсь добиться того, чтобы колонки получили полную ширину на мобильном устройстве, сейчас это не так, чтобы получить идею, я добавляю картинку как я хочу, чтобы этот макет выглядел на мобильном телефоне:

Кто-нибудь может мне помочь с этим?

Answer 1

Вы можете просто добавить медиазапрос, в котором вы измените display на block для всех разделов (установите точку останова, если необходимо, здесь 720px, чтобы сразу показать мобильную версию, но, конечно, вы можете настроить ее, например, на 480px).

@media (max-width: 720px) {
  section {
     display: block;
  }
}

Это деактивирует все параметры гибкости и установит width в auto (= полная ширина)

section {
	 max-width: 740px;
	 margin: 0 auto;
	 display: flex;
}
 .column {
	 margin: 10px;
	 flex-grow: 1;
	 flex-shrink: 1;
	 flex-basis: 0;
}
 section:nth-of-type(5) .column:first-of-type {
	 flex-grow: 2;
	 flex-shrink: 2;
	 flex-basis: 22px;
}
 section:nth-of-type(6) .column:nth-of-type(2) {
	 flex-grow: 4;
	 flex-shrink: 4;
	 flex-basis: 66px;
}
/* OTHER STYLES */
 html, body {
	 height: 100%;
	 box-sizing: border-box;
}
 body {
	 font-family: 'Raleway', sans-serif;
	 padding: 10px;
	 background: linear-gradient(135deg, #b04, #f80) fixed;
}
 .column {
	 padding: 10px 0;
	 background-color: rgba(255, 0, 0, 0.25);
	 text-align: center;
	 border: 1px solid rgba(255, 255, 255, 0.75);
	 background-color: rgba(255, 255, 255, 0.2);
	 color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 720px) {
  section {
	 display: block;
  }
}

<section>
  <div class="column">aa</div> 
</section>

<section>
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  
</section>

<section>
  <div class="column">aa</div> 
</section>


<section>
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  
</section>

<section>
  <div class="column">aa</div> 
</section>

<section>
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
 
</section>

Answer 2

Html

<section>
      <div class="column">aa</div> 
    </section>

    <section>
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>

    </section>

    <section>
      <div class="column">aa</div> 
    </section>


    <section>
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
      <div class="column">4</div>

    </section>

    <section>
      <div class="column">aa</div> 
    </section>

    <section>
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>

    </section>

CSS

section {
     max-width: 740px;
     margin: 0 auto;
     display: flex;
   flex-wrap: wrap ;
}
 .column {
     margin: 10px;
     flex-grow: 1;
     flex-shrink: 1;
}
 section:nth-of-type(5) .column:first-of-type {
     flex-grow: 2;
     flex-shrink: 2;
     flex-basis: 22px;
}
 section:nth-of-type(6) .column:nth-of-type(2) {
     flex-grow: 4;
     flex-shrink: 4;
     flex-basis: 66px;
}
/* OTHER STYLES */
 html, body {
     height: 100%;
     box-sizing: border-box;
}
 body {
     font-family: 'Raleway', sans-serif;
     padding: 10px;
     background: linear-gradient(135deg, #b04, #f80) fixed;
}
 .column {
     padding: 10px 0;
     background-color: rgba(255, 0, 0, 0.25);
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.75);
     color: rgba(255, 255, 255, 0.9);
}

@media(max-width: 576px) {
  .column {
    flex-basis: 576px ;
  }
}

Answer 3

Это может быть достигнуто двумя способами, 1) давая flex-direction: column; разделу 2) Давая flex-direction: row; flex-wrap: wrap и его дочерние элементы (то есть столбец) flex: 1 1 100%; пример

@media (max-width: 767px){
   section {
     flex-direction: column;
     -webkit-flex-direction: column;
   }
}

Или

@media (max-width: 767px){
   section {
     flex-direction: row;
     -webkit-flex-direction: row;
     flex-wrap: wrap;
     -webkit-flex-wrap: wrap;
   }
   .column {
     flex: 1 1 100%;
     -webkit-flex: 1 1 100%;
    }
}

Answer 4

Итак, я добавил точку останова css для тега раздела, как вы можете видеть в конце строки css. Таким образом, ниже ширины окна 480px у вас будет полная ширина элементов.

section {
	 max-width: 740px;
	 margin: 0 auto;
	 display: flex;
}
 .column {
	 margin: 10px;
	 flex-grow: 1;
	 flex-shrink: 1;
	 flex-basis: 0;
}

/* OTHER STYLES */
 html, body {
	 height: 100%;
	 box-sizing: border-box;
}
 body {
	 font-family: 'Raleway', sans-serif;
	 padding: 10px;
	 background: linear-gradient(135deg, #b04, #f80) fixed;
}
 .column {
	 padding: 10px 0;
	 background-color: rgba(255, 0, 0, 0.25);
	 text-align: center;
	 border: 1px solid rgba(255, 255, 255, 0.75);
	 background-color: rgba(255, 255, 255, 0.2);
	 color: rgba(255, 255, 255, 0.9);
}
/* MEDIA QUERY */
@media(min-width: 481px) {
    section:nth-of-type(5) .column:first-of-type {
        flex-grow: 2;
        flex-shrink: 2;
        flex-basis: 22px;
    }

    section:nth-of-type(6) .column:nth-of-type(2) {
        flex-grow: 4;
        flex-shrink: 4;
        flex-basis: 66px;
    }
}
@media(max-width: 480px) {
    section {
        flex-direction: column;
    }
}
 

<section>
  <div class="column">aa</div> 
</section>

<section>
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  
</section>

<section>
  <div class="column">aa</div> 
</section>


<section>
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  
</section>

<section>
  <div class="column">aa</div> 
</section>

<section>
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
 
</section>