elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Forma orden de contenido con flexbox en html		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Forma orden de contenido con flexbox en html  (Leído 4,005 veces)
SERGIO_@PRENDE

Desconectado Desconectado

Mensajes: 19


Ver Perfil
Forma orden de contenido con flexbox en html
« en: 6 Octubre 2021, 06:59 am »
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
  1. <!DOCTYPE html>
  2. <html lang="es">
  4.   <title>PAG</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8.  
  9.  
  10. <title>Bootstrap Example</title>
  11.  
  12.   <link rel="stylesheet" href="css/estilo.css"/>
  13.  
  14.  
  15. </head>
  17.  
  18.  
  19. <section class="flex-container">
  20.  
  21.  
  22. <div class="caja c1">
  23.      caja 3
  24. </div>
  25.  
  26.  
  27.  
  28.  
  29.  <div class="caja c2">
  30.      caja 2
  31. </div>
  32.  
  33.  
  34.  
  35.  
  36.  <div class="caja c3">
  37.      caja 3
  38. </div>
  39.  
  40.  
  41.  
  42. </section>
  43.  
  44.  
  45. </body>
  46. </html>
  47.  



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



Código:
*{
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;

    
}
« Última modificación: 6 Octubre 2021, 07:07 am por SERGIO_@PRENDE » En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Forma orden de contenido con flexbox en html
« Respuesta #1 en: 6 Octubre 2021, 16:35 pm »
Anidando un contenedor flexbox del lado derecho:

Código
  1. <div class="outer">
  2.   <div class="left">
  3.   </div>
  4.   <div class="right">
  5.     <div class="top">
  6.     </div>
  7.     <div class="bottom">
  8.     </div>
  9.   </div>
  10. </div>

Código
  1. .outer {
  2.   display: flex;
  3.   min-height: 200px;
  4. }
  5.  
  6. .left {
  7.   background: brown;
  8.   flex: 1;
  9. }
  10.  
  11. .right {
  12.   display: flex;
  13.   flex-direction: column;
  14.   flex: 3;
  15. }
  16.  
  17. .top {
  18.   background: green;
  19.   flex: 1;
  20. }
  21.  
  22. .bottom {
  23.   background: yellow;
  24.   flex: 1;
  25. }
En línea
SERGIO_@PRENDE

Desconectado Desconectado

Mensajes: 19


Ver Perfil
Re: Forma orden de contenido con flexbox en html
« Respuesta #2 en: 6 Octubre 2021, 18:32 pm »
lo implemente pero no me apareció ningún contenido




Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.     <head>
  4.   <title>PAG</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="css/estilo.css"/>
  8.     </head>
  9.     <body>
  10.    <div class="outer">
  11.   <div class="left">
  12.   </div>
  13.   <div class="right">
  14.     <div class="top">
  15.     </div>
  16.     <div class="bottom">
  17.     </div>
  18.   </div>
  19. </div>
  20.     </body>
  21. </html>
En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Forma orden de contenido con flexbox en html
« Respuesta #3 en: 6 Octubre 2021, 18:47 pm »
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...
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Cambiar contenido de una orden
Programación Visual Basic 		Buen_Hombre 1 1,324 Último mensaje 9 Febrero 2008, 12:44 pm
por Hans el Topo
Contenido html
Programación Visual Basic 		DarkMatrix 1 2,214 Último mensaje 23 Mayo 2009, 23:14 pm
por DarkMatrix
campo text con contenido html fpdf
PHP 		OssoH 2 3,902 Último mensaje 15 Octubre 2010, 12:38 pm
por OssoH
Importar contenido de archivo txt en html / javascript!!!
Desarrollo Web 		<][E@GLE][> 2 3,254 Último mensaje 20 Diciembre 2013, 12:15 pm
por USLO
[CONSULTA] - Crear imagen desde contenido HTML
Programación General 		Kataplaf 0 2,033 Último mensaje 29 Diciembre 2015, 20:38 pm
por Kataplaf
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines