New question

Question:

 
  8  
 
 
Juan Quinto Karma: 2761 Peru
 
 Date: 12-12-2015 07:22:14 (In Spanish)

Una forma fácil de hacer web responsive (Flex)[Resolved]

Las Cajas flexibles o FlexBox, es un nuevo modo de maquetar una Web o Aplicación Web. Quizás Años atrás existía esta propiedad pero CSS3 lo llevo a otro nivel. Flexbox es una manera mas sencilla de hacer responsive nuestro diseño mediante bloques, tambien podemos retener estructuras de bloques en linea sin que pierdan su forma

ajunto codigo html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="css.css">
</head>
<body>
<header>Header</header>
 
<!-- Contenedor para el contenido de en Medio de mi Página de la web -->
  <div id='contenedor'>
   <section class="contenido_medio">Contenido medio</section> <!-- Contenido en la parte de en Medio de mi Página de la web -->
   <section class="lado_izquierdo">Lado izquierdo</section> <!-- Contenido de la parte Izquierda de mi Página de la web -->
   <section class="lado_derecho">Lado derecho</section> <!-- Contenido de la parte Derecha de mi Página de la web -->
  </div>
 
<!-- Mi Footer o Pie de Página de la web -->
<footer>Footer</footer>
	
</body>
</html>



Codigo css

  body {
   font-family: Arial;
   font-size: 24px;
   color: #877CB1;
  }

 h1 {
  text-align: center;
  color: #4F4F52;
 }

  #contenedor {
    min-height: 800px; /* Para mi contendor del contenido principal le puedo dar un height: 100% y se adaptara también el alto*/
    margin: 0px;
    padding: 0px;
    display: -webkit-flex; /* Le indico que detecte automáticamente la longitud de la pagina */
    display: flex; /* Inicio la propiedad Flexbox con */
    -webkit-flex-flow: row; /* Le indico que las columnas se muestren una fila debajo de otra cuando la pantalla del dipositivo sea de menos ancho */
    flex-flow: row; /* Defino la direccion del bloque es decir con se muestra en fila(row) una debajo de otra cuando la pantalla del dipositivo sea de menos ancho */
   }
 
  #contenedor > .contenido_medio {
    min-height: 800px;
    margin: 4px;
    padding: 5px;
    border: 9px solid #CCC5C5;
    background-color: #E8F0F1;

    -webkit-flex: 3 1 60%; /* Llenaré 3/3 (3 tercios) del ancho que quede  y también especifico el ancho del bloque, para navegadores anteriores*/
    flex: 3 1 60%; /* Llenaré 3/3 (3 tercios) del ancho que quede  y también especifico el ancho del bloque, para los Nuevos navegadores */
    -webkit-order: 2; /* Le indico el orden de este columna, es decir la columna de la izquierda es la 1, la que sigue esta la 2 y la de la derecha es la columna 3 */
    order: 2; /* Le indico el orden de este columna, igual que -webkit-order, para otras versiones de navegadores */  
    display: -webkit-flex;
    display: flex;   
    flex-direction: row; /* Establezco la dirección de los elementos flexibles que hay adentro de este elemento, en orden inverso */
    
    /* Centro vertical y horizontalmente todo los elementos dentro de este contenedor*/
    -webkit-align-items: center;
    align-items: center; 
    -webkit-justify-content: center;
    justify-content: center; 
   }
  
  #contenedor > .lado_izquierdo {
    min-height: 800px;
    margin: 4px;
    padding: 5px;
    border: 9px solid #CCC5C5;
    background-color: #AAC6E8;
    -webkit-flex: 1 6 40%;
    flex: 1 6 20%;
    -webkit-order: 1;
    order: 1;
    display: -webkit-flex;
    display: flex; 
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
   }
  
  #contenedor > .lado_derecho{
    min-height: 800px;
    margin: 4px;
    padding: 5px;
    border: 9px solid #CCC5C5;
    background-color: #AAC6E8;
    -webkit-flex: 1 6 20%;
    flex: 1 6 20%;
    -webkit-order: 3;
    order: 3;
    display: -webkit-flex;
    display: flex; 
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
   }
 
  header, footer {
    height: 100px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;    
    min-height: 100px;
    border: 9px solid #CCC5C5;
    background-color: #CEE8F3;
   }

 
  /* Cuando tenga el ancho de 640 px, que se visualize en una sola columna los bloques de mi Pagina Wéb  */
  @media all and (max-width: 640px) {
  
   #contenedor {
    -webkit-flex-flow: column;
            flex-direction: column; /* Que se visualize en una sola columna los bloques de mi Pagina Wéb */
   }

   #contenedor > contenido_medio, #contenedor > lado_izquierdo, #contenedor > aside {
    /* Retorno el orden del documento */
    -webkit-order: 0;
            order: 0;
   }
  
   #contenedor > lado_izquierdo, #contenedor > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }





dejo enlace para mas informacion

http://blog.collectivecloudperu.com/crear-una-web-con-css-flexbox/



saludos

 Tags: CSS - CSS3 - HTML5 - Input - Responsive - Responsive Web Design Votes: 8 - Answers: 5 - Views: 25 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

To actively participate in the community first must authenticate, enter the system.Sign In
 
frjcbbae garagebible.com