El diseño flexible es muy común y debe dominarse.
propiedades del contenedor padre flexible
- propiedad flex-direction: la dirección de disposición de los subelementos
- flex-warp: múltiples líneas de subelementos
- Los subelementos de flujo flexible se especifican juntos en varias líneas
- justificar contenido: alinear horizontalmente
- alinear-elementos: alineación vertical
- align-content: alineación de varias líneas. Solo funciona cuando hay varias filas de elementos en varias filas, los elementos de una sola fila no funcionan
subelemento flexible
- pedido
- Proporción de extensión de subelementos de crecimiento flexible
3. Otros atributos
código de prueba
html
<!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>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<!-- <div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div> -->
<!-- <div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div> -->
</div>
</body>
</html>
css
body{
background-color: azure;
}
.container{
margin: 150px auto;
max-width: 800px;
height: 400px;
padding: 20px;
background-color: rgb(196, 229, 232);
border: 10px solid rgb(0, 181, 203);
display: flex;
/* flex-direction: row;
flex-wrap: wrap; */
/* flex-flow: row-reverse wrap; */
justify-content: space-around;
/* align-items: baseline; */
}
.item{
background-color: rgb(0, 181, 203);
color: white;
width: 100px;
height: 100px;
margin: 2px;
font-weight: bold;
font-size: 5em;
text-align: center;
}
.item-1{
flex-basis: 200px;
flex-shrink: 1;
}
.item-2{
flex-basis: 200px;
flex-shrink: 1;
}
.item-3 {
/* font-size: 3em; */
/* order: 1; */
/* flex-grow: 2; */
flex-basis: 200px;
flex-shrink: 300;
}