html - Columna izquierda y columna derecha apilada usando flexbox CSS

css3

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Es posible que los elementos flexibles se alineen estrechamente con los elementos que están encima de ellos? 5 respuestas
• Haz que un div abarque dos filas en una cuadrícula 2 respuestas

En pantallas grandes, me gustaría tener una columna a la izquierda y otra columna a la derecha que tenga 2 cajas apiladas.

En pantallas pequeñas, estas columnas deben apilarse en una sola columna. Sin embargo, el orden de las cajas debe ser 2,1,3.

Aquí hay una ilustración:

He configurado el contenedor flexible con flex-direction: column y flex-wrap: wrap , y box 1 en flex-basis: 100% , pero eso no hace que los dos segundos elementos se ajusten a la siguiente columna.

¿Cómo se puede lograr este diseño en flexbox?

Aquí hay una demostración de dónde estoy hasta ahora:

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.cell {
  background: #ccc;
  border: solid 3px black;
  width: 50%;
}
.cell-1 {
  flex-basis: 100%;
}
@media (max-width: 500px) {
  .cell {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }
}

<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
  <div class="cell cell-1">
    <h2>One</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
  </div>
  <div class="cell cell-2">
    <h2>Two</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
  </div>
  <div class="cell cell-3">
    <h2>Three</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
  </div>
</div>

http://codepen.io/dloewen/pen/qOzogG

Answer 1

Parece que ya casi estabas allí. Solo dos pasos más:

1. Definir una altura para el contenedor flexible

   Sin una altura definida, algunos navegadores pueden no saber dónde envolver. Prueba esto:

   .container {
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
       height: 500px; /* new; value just for demo purposes */
   }

2. Desactivar envoltura en vista móvil

   @media (max-width: 500px) {
      .container { flex-wrap: nowrap; } /* new */
      .cell { width: 100%; }
      .cell-1 { order: 2; }
      .cell-2 { order: 1; }
      .cell-3 { order: 3; }
   }

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
}
.cell {
  background: #ccc;
  border: solid 3px black;
  width: 50%;
}
.cell-1 {
  flex-basis: 100%;
}
@media (max-width: 500px) {
  .container {
    flex-wrap: nowrap;
  }
  .cell {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }
}

<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
  <div class="cell cell-1">
    <h2>One</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
  </div>
  <div class="cell cell-2">
    <h2>Two</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
  </div>
  <div class="cell cell-3">
    <h2>Three</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
  </div>
</div>

codepen revisado

Answer 2

Primero creamos un contenedor .Box y establecemos ancho y alto. Honestamente, es solo para demostración, configuré 80vw y 80vh. Y ese contenedor debe ser un elemento flexible con orientación de columna flex-flow: column wrap; . Y establecemos el ancho máximo de los bloques más grandes ( .BoxItem--large { max-width: 80%; height: 100%; } ) 100% de la altura de los padres. Es para envolver los otros elementos en la nueva línea / columna. Entonces, los elementos de otra columna deben llenar todo el espacio, por lo que configuramos .BoxItem--small { max-width: 20%; height: auto; } .BoxItem--small { max-width: 20%; height: auto; } .BoxItem--small { max-width: 20%; height: auto; } - sí, 80% + 20% == 100%, que las matemáticas. cambiemos el comportamiento en las pantallas de bajo ancho. @media screen and (max-width: 600px) { .Box { flex-flow: column nowrap; } } @media screen and (max-width: 600px) { .Box { flex-flow: column nowrap; } } no necesitamos envolver elementos, así que solo cambia eso. Después de eso, queremos que cada elemento BoxItem herede el ancho de los padres. .BoxItem { width: 100%; max-width: 100%; } .BoxItem { width: 100%; max-width: 100%; } max-width: 100%; para la conexión en cascada, no queremos preocuparnos por algunas reglas antiguas como .BoxItem--large { max-width: 80%; } .BoxItem--large { max-width: 80%; } y .BoxItem--small { max-width: 20%; } .BoxItem--small { max-width: 20%; } . Y establecer algunos cambios de orden.

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #F72F4E;
  overflow: hidden;
}


.Box {
  width: 80vw;
  height: 80vh;
  background-color: rgba(0,0,0,.2);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.BoxItem {
  background-color: #fff;
  border: 1px solid #000;
}
.BoxItem--large {
  max-width: 80%;
  height: 100%;
}
.BoxItem--small {
  max-width: 20%;
  height: auto;
}
@media screen and (max-width: 600px) {
  .Box {
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
  }
  .BoxItem {
    width: 100%;
    max-width: 100%;
  }
  .BoxItem--large {
    height: auto;
  }
  .BoxItem--1 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
  .BoxItem--2 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  .BoxItem--3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
}

<div class="Box">
  <div class="BoxItem BoxItem--large BoxItem--1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit. Dolores ea unde iste esse illo sit, repellat molestias deleniti, voluptas expedita commodi odio possimus amet?</div>
  <div class="BoxItem BoxItem--small BoxItem--2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
  <div class="BoxItem BoxItem--small BoxItem--3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
</div>