Правильное расположение разделов в CSS

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

У меня следующая структура divs:

 .wrapper {
  display: flex;
  flex-wrap: wrap;
  font-size: 27px;
  max-width: 800px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.a {
  width: 200px;
  height: 100px;
}

.b {
  width: 400px;
  height: 100px;
}

 <div class='wrapper'>
  <div class='a' style="background: green">A</div>
  <div class='a' style="background: red">B</div>
  <div class='a' style="background: blue">C</div>
  <div class='b' style="background: yellow">D</div>
  <div class='a' style="background: pink">E</div>
</div>

Но когда не хватает места, я бы это изменил на:

Я пробовал с flex, но он всегда нажимает E div после D div. Нужна помощь

Ответ №1:

В моем примере есть media query . Для достижения желаемого результата вам нужно добавить order 2 правило и растянуть по flex: 100% для class b , а также разделить блоки class a на два столбца, используя flex: 50% правило.

Было ли это необходимо?

 .wrapper {
  display: flex;
  flex-wrap: wrap;
  font-size: 27px;
  max-width: 800px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.a {
  width: 200px;
  height: 100px;
}

.b {
  width: 400px;
  height: 100px;
}

@media(max-width: 615px){
  .b {
    order: 2;
    flex: 100%;
}

  .a {
    flex: 50%;
  }
}

 <div class='wrapper'>
  <div class='a' style="background: green">A</div>
  <div class='a' style="background: red">B</div>
  <div class='a' style="background: blue">C</div>
  <div class='b' style="background: yellow">D</div>
  <div class='a' style="background: pink">E</div>
</div>

Это еще одно решение с минимальным media query , но вам нужно добавить max-width: 50% правило в класс a ;

 .wrapper {
  display: flex;
  flex-wrap: wrap;
  font-size: 27px;
  max-width: 800px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.a {
  width: 200px;
  max-width: 50%;
  height: 100px;
}

.b {
  width: 400px;
  height: 100px;
}

@media(max-width: 615px){
  .b {
    order: 2;
}
}

 <div class='wrapper'>
  <div class='a' style="background: green">A</div>
  <div class='a' style="background: red">B</div>
  <div class='a' style="background: blue">C</div>
  <div class='b' style="background: yellow">D</div>
  <div class='a' style="background: pink">E</div>
</div>

Ответ №2:

Сделайте что-то вроде этого:

 .fbox{
    float: left;
    width:50%;
    height:100px;
}

.box-a{
    background-color: red;
    text-align: center;
    color: #ffffff;
}

.box-b{
    background-color: green;
    text-align: center;
    color: #ffffff;
}

.sbox{
    float: left;
    width:50%;
    height:100px;
}

.box-c{
    background-color: blue;
    text-align: center;
    color: #ffffff;
}

.box-d{
    background-color: gray;
    text-align: center;
    color: #ffffff;
}

#third-one{
    height:100px;
    width:100%;
    text-align: center;
}

 <div class="boxes">
       <div class="first-two">
           <div class="fbox box-a">
                 a
           </div>
           <div class="fbox box-b">
                 b
           </div>
       </div>
       <div class="second-two">
           <div class="sbox box-c">
                 c
           </div>
           <div class="sbox box-d">
                 d
           </div>
       </div>
</div>
<div id="third-one">
           e
</div>

Ответ №3:

порядок также является решением, поскольку это гибкий макет

из предыдущего комментария:

Попробуйте .b{ order:2;} установить D в последнюю позицию.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  font-size: 27px;
  max-width: 800px;
  /* maybe useful here too */
  justify-content: center;
  margin:auto;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.a {
  width: 200px;
  height: 100px;
}

.b {
  width: 400px;
  height: 100px;
}

@media screen and (max-width:600px) {
  .b {
    order: 2;
  }
}

 <div class='wrapper'>
  <div class='a' style="background: green">A</div>
  <div class='a' style="background: red">B</div>
  <div class='a' style="background: blue">C</div>
  <div class='b' style="background: yellow">D</div>
  <div class='a' style="background: pink">E</div>
</div>