Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Forma orden de contenido con flexbox en html

HTML - Forma orden de contenido con flexbox en html

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Forma orden de contenido con flexbox en html

Publicado por George (5 intervenciones) el 06/10/2021 06:57:00
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 |
|---------------------------------------------|--------------------------------------------------------------------------------|

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
*{
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;
}
 
.logo img{
 	width: 240px;
	height: 100px;
	padding: 10px;
}
 
 
 
 
 
.c1{
	height: 100px;
	width: 30%;
}
 
.c2{
	height: 50px;
	width: 70%;
}
 
 
.c3{
	height: -100px;
	width: 20px;
		background-color:aqua;
			padding: 10px;
 
 
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Forma orden de contenido con flexbox en html

Publicado por George (5 intervenciones) el 06/10/2021 07:03:45
perdonen esta es la imagen la forma que deseo armar

pag-normal.fw
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Forma orden de contenido con flexbox en html

Publicado por George (5 intervenciones) el 06/10/2021 07:05:35
pag-normal.fw
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de pablo
Val: 6
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Forma orden de contenido con flexbox en html

Publicado por pablo (22 intervenciones) el 06/10/2021 20:03:33
Hola George mira aquí un código que hice, espero te sea de utilidad

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="main-contenedor">
    <div class="contenedor1" >
      <h1>Caja 1</h1>
    </div>
    <div class="contenedor2">
      <div>
        <h1>Caja 2</h1>
      </div>
      <div>
        <h1>Caja 3</h1>
      </div>
    </div>
  </div>
 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
*{
  border-box:box-sizing;
  margin:0;
  padding:0;
  color: #fff;
}
.contenedor1{
  background:brown;
  width:20%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.contenedor2 div{
  padding:20px;
}
.contenedor2 div:nth-child(1){
  background:green;
}
.contenedor2 div:nth-child(2){
  background:#e9c46a;
}
.main-contenedor{
  display:flex;
  flex-direction:row;
}
 
.contenedor2{
  width:100%;
  display:flex;
  flex-direction:column;
  text-align:center;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Forma orden de contenido con flexbox en html

Publicado por Cael (5 intervenciones) el 06/10/2021 22:41:22
Muchas gracias, si es lo que busco, gracias, ampliamente recomendable, gracias de verdad
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar