Forma orden de contenido con flexbox en html

Iniciado por SERGIO_@PRENDE, 6 Octubre 2021, 06:59 AM

0 Miembros y 1 Visitante están viendo este tema.

SERGIO_@PRENDE

Saludos como poder crear un orden especifico con flexbox soy nuevo en programación  deseo hacer esta forma disculpen la forma grafica.

|---------------------------------------------|-------------------------------------------------------------------------------|
|                                                          |                                         caja 2                                                    |
|                                caja 1                 |-------------------------------------------------------------------------------|                                                
|                                                          |                   caja 3                                                                          |
|---------------------------------------------|-------------------------------------------------------------------------------|






Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
 <title>PAG</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">



<title>Bootstrap Example</title>

 <link rel="stylesheet" href="css/estilo.css"/>


</head>
<body>


<section class="flex-container">


<div class="caja c1">
    caja 3
</div>




<div class="caja c2">
    caja 2
</div>




<div class="caja c3">
    caja 3
</div>



</section>


</body>
</html>




///////////////////////////////////////////////////// el code csss



*{
box-sizing: border-box;
}

body{
font-family: ARIAL, Helvetica, sans-serif;
margin:0;
padding:0;
background-color:#BFBBBB;
}

.flex-container{
display: flex;
border:1px solid black;
background-color:#212529;
}







.c1{
height: 100px;
width: 30%;
}

.c2{
height: 50px;
width: 70%;
}


.c3{
height: -100px;
width: 20px;
background-color:aqua;
padding: 10px;

   
}



MinusFour

Anidando un contenedor flexbox del lado derecho:

Código (html) [Seleccionar]

<div class="outer">
  <div class="left">
  </div>
  <div class="right">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
  </div>
</div>


Código (css) [Seleccionar]

.outer {
  display: flex;
  min-height: 200px;
}

.left {
  background: brown;
  flex: 1;
}

.right {
  display: flex;
  flex-direction: column;
  flex: 3;
}

.top {
  background: green;
  flex: 1;
}

.bottom {
  background: yellow;
  flex: 1;
}

SERGIO_@PRENDE

lo implemente pero no me apareció ningún contenido




Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
  <title>PAG</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/estilo.css"/>
    </head>
    <body>
   <div class="outer">
  <div class="left">
  </div>
  <div class="right">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
  </div>
</div>
    </body>
</html>

MinusFour

A mi me funciona:

https://jsfiddle.net/MinusFour/ujhzy46f/

¿O te refieres al hecho de que no hay texto? E.g. "caja 1", "caja 2", etc...