Categorias
iiiiii
Csss proyecto
Descripcion
Proyeecto css avanadao
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex box </title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<link rel="stylesheet" type="text/css" href="AlterarElementosEspesificosEnFlexBox.css">
</head>
<body>
<p>
<h1>Flex box</h1> es una contenedor que nos permite organizar elementos en filas o culumnas como tambien su orden solo usando css
</p>
<div class="contenedor">
<div class="item">Imen 1</div>
<div class="item">Imen 2</div>
<div class="item">Imen 3</div>
<div class="item">Imen 4</div>
<div class="item">Imen 5</div>
<div class="item">Imen 6</div>
<div class="item">Imen 7</div>
</div>
<br>
<hr>
<div class="contenedor2">
<div class="item">Imen 1</div>
<div class="item">Imen 2</div>
</div>
<br>
<hr>
<div class="contenedor3">
<div class="item">Imen 1</div>
<div class="item">Imen 2</div>
<div class="item">Imen 3</div>
<div class="item">Imen 4</div>
</div>
<hr>
<br>
<p>
<span style="font-size: 30px">Tambien podemos alterar a elementos espesificos dentro de un flex box </span>
</p>
<br>
<br>
<div class="flexbox">
<div class="item">item 1</div>
<div class="item segundo">item 2</div>
<div class="item tercero">item 3</div>
</div>
</body>
</html>
css
.contenedor{
/*Para activar el leyaout flex box*/
display: flex;
/* por fefaul acomoda los componenetes en row*/
/*con esto acomodamos la direccion de orden row o colm y se les spude indicar column-reverse o row-reverse*/
flex-direction: column;
/* esto se utiliza para agrupar dichos elementos ¿como se agrupan? justo como indicaste en direction y estos elementos se acomodaran para ocupar todo el ancho del padre*/
flex-wrap:wrap;
width: 300px;
height: 214px;
background-color: blue;
margin:10px auto;
}
.contenedor2{
/*Para activar el leyaout flex box*/
display: flex;
/* por fefaul acomoda los componenetes en row*/
/*con esto acomodamos la direccion de orden row o colm y se les spude indicar column-reverse o row-reverse*/
flex-direction: row;
/* esto se utiliza para agrupar dichos elementos ¿como se agrupan? justo como indicaste en direction y estos elementos se acomodaran para ocupar todo el ancho del padre*/
flex-wrap:wrap;
/*como justificar el contenido en el eje horizontal
space-between :espacio entre ellos automatico;
space-around : espacio entre ellos mas espacio entre el contenedor y ellos;
flex-end :al final del comtenedor;
flex-star: al inicio del conetenedor;
*/
justify-content:center;
/* como modificar align items que justifca verticalmente*/
align-items: center;
width: 306px;
height: 227px;
background-color: blue;
margin:10px auto;
}
.contenedor3{
/*Para activar el leyaout flex box*/
display: flex;
/* por fefaul acomoda los componenetes en row*/
/*con esto acomodamos la direccion de orden row o colm y se les spude indicar column-reverse o row-reverse*/
flex-direction: row;
/* esto se utiliza para agrupar dichos elementos ¿como se agrupan? justo como indicaste en direction y estos elementos se acomodaran para ocupar todo el ancho del padre*/
flex-wrap:wrap;
/* con este toma todo lo que tiene adentro el felx box osea el div contenedor y lo toma como si fuera un solo elemento
y contempla las mismas propiedades de justify-content
*/
align-content:center;
width: 306px;
height: 227px;
background-color: blue;
margin:10px auto;
}
.item{
width: 50px;
padding: 20px;
height: 21px;
margin: 5px;
background-color: orange;
text-align: center;
}
.contenedor2 .item{
width: 50px;
padding: 20px;
height: 21px;
margin: 0px;
background-color: orange;
text-align: center;
}
.contenedor3 .item{
width: 50px;
padding: 20px;
height: 21px;
margin: 0px;
background-color: orange;
text-align: center;
}
/*********************************Afectar a elementos unicos dentro del flex box****************************************/