Buenas tardes a todos estoy aprendiendo un poco de css especificamente la propiedad flex y estoy haciendo un documento html donde practico cada propiedad, en el ultimo ejemplo no logro entender porque no aumenta el tamaño de la fuente como en los ejemplos anteriores tengo una laguna mental muy grande no doy con la solucion tengo 2 dias tratando de solucionar y nada me gustaria saber en que estoy fallando. En el body declare font-size: 25px
Esto no deberia aplicar el tamaño de la fuente a 25 pixeles a todo lo que se encuentre dentro del body?
En el div order se encuentra las letrsas C, A, B, E ,D a diferencia del div flex-grow las letras A, B C son mucho mas pequeñas
Codepen para ver mi codigo corriendo para que puedan visualizar mejor el problema https://codepen.io/alluka/pen/PoqaZzm
gracias de antenmano.
Imagen donde tengo el problema:
/* https://flexbox.help/ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: rgb(144, 144, 144);
}
body {
font-size: 25px;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
color: white;
width: 70%;
text-align: center;
/* line-height: 2; */
margin: 0 auto; /* Alinear documento verticalmente*/
}
.container {
border: 8px solid red;
}
.container-item {
border: 8px solid blue;
margin: 5px;
padding: 3px;
}
/* flex-direction */
.flex {
display: flex;
}
.rs {
flex-direction: row-reverse;
}
.c {
flex-direction: column;
}
.cr {
flex-direction: column-reverse;
}
.Ejemplo2 {
border: 8px solid red;
}
.e2-item {
margin: 0px;
padding: 0px;
background-color: blue;
margin: 5px;
width: 65px;
height: 65px;
text-align: center;
}
/* flex-wrap */
.flex-wrap {
flex-wrap: wrap;
border: 8px solid red;
}
.flex-nowrap {
flex-wrap: nowrap;
border: 8px solid red;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
border: 8px solid red;
}
.wrap-item {
background-color: blue;
margin: 5px;
width: 100px;
height: 100px;
}
/* */
.justity {
border: 8px solid red;
/* justify-content: flex-start; */
}
.justity-flex-end {
border: 8px solid red;
justify-content: flex-end;
}
.justity-flex-center {
border: 8px solid red;
justify-content: center;
}
.justity-flex-sb {
border: 8px solid red;
justify-content: space-between;
}
.justity-flex-sa {
border: 8px solid red;
justify-content: space-around;
}
.justity-flex-se {
border: 8px solid red;
justify-content: space-evenly;
}
.order {
/* align-content: center; */
border: 8px solid red;
}
/* order */
.or-item:nth-child(1) {
background-color: blue;
margin: 5px;
width: 100px;
height: 100px;
order: 2;
}
.or-item:nth-child(2) {
background-color: green;
margin: 5px;
width: 100px;
height: 100px;
order: 3;
}
.or-item:nth-child(3) {
background-color: goldenrod;
margin: 5px;
width: 100px;
height: 100px;
order: 1;
}
.or-item:nth-child(4) {
background-color: purple;
margin: 5px;
width: 100px;
height: 100px;
order: 5;
}
.or-item:nth-child(5) {
background-color: saddlebrown;
margin: 5px;
width: 100px;
height: 100px;
order: 4;
}
.flex-grow {
display: flex;
border: red solid 8px;
margin: 5px;
}
.flex-grow-item {
background-color: blue;
height: 100px;
width: 100px;
margin: 5px;
}
/* Primer elemento */
.flex-grow-item:nth-of-type(1) {
flex-grow: 0; /* Valor por defecto */
}
/* Segundo Elemento */
.flex-grow-item:nth-of-type(2) {
flex-grow: 1;
}
/* Tercer elemento */
.flex-grow-item:nth-of-type(3) {
flex-grow: 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./flex.css" />
<style></style>
</head>
<body>
<h1>Contenedores Flex</h1>
<h2>Sin Flex</h2>
<div class="container">
<div class="container-item">
<h3>UNO</h3>
</div>
<div class="container-item">
<h3>DOS</h3>
</div>
<div class="container-item">
<h3>TRES</h3>
</div>
<div class="container-item">
<h3>CUATRO</h3>
</div>
</div>
<br />
<br />
<!-- Aplicando propiedad Flex -->
<h2>Con Flex</h2>
<div class="container flex">
<div class="container-item">
<h3>UNO</h3>
</div>
<div class="container-item">
<h3>AJUSTE AUTOMATICO</h3>
</div>
<div class="container-item">
<h3>TRES</h3>
</div>
<div class="container-item">
<h3>CUATRO</h3>
</div>
</div>
<!-- Direccion Flex -->
<br />
<br />
<h1>flex-direction</h1>
<p>Flex posee las direcciones (<strong>Default:row</strong>):</p>
<ul>
<li>row</li>
<li>row-reverse</li>
<li>column</li>
<li>column-reverse</li>
<li>initial</li>
</ul>
<br />
<!-- row -->
<h2>row</h2>
<div class="container flex">
<div class="container-item">
<h3>UNO</h3>
</div>
<div class="container-item">
<h3>DOS</h3>
</div>
<div class="container-item">
<h3>TRES</h3>
</div>
<div class="container-item">
<h3>CUATRO</h3>
</div>
</div>
<br />
<!-- row-reverse -->
<h2>row-reverse</h2>
<div class="container flex rs">
<div class="container-item">
<h3>UNO</h3>
</div>
<div class="container-item">
<h3>DOS</h3>
</div>
<div class="container-item">
<h3>TRES</h3>
</div>
<div class="container-item">
<h3>CUATRO</h3>
</div>
</div>
<br />
<!-- colum -->
<h2>column</h2>
<div class="container flex c">
<div class="container-item">
<h3>UNO</h3>
</div>
<div class="container-item">
<h3>DOS</h3>
</div>
<div class="container-item">
<h3>TRES</h3>
</div>
<div class="container-item">
<h3>CUATRO</h3>
</div>
</div>
<br />
<!-- column-reverse -->
<h2>column-reverse</h2>
<div class="container flex cr">
<div class="container-item">
<h3>UNO</h3>
</div>
<div class="container-item">
<h3>DOS</h3>
</div>
<div class="container-item">
<h3>TRES</h3>
</div>
<div class="container-item">
<h3>CUATRO</h3>
</div>
</div>
<br />
<br />
<h1>row</h1>
<div class="Ejemplo2 flex">
<div class="e2-item">
<h1>A</h1>
</div>
<div class="e2-item">
<h1>B</h1>
</div>
<div class="e2-item">
<h1>C</h1>
</div>
<div class="e2-item">
<h1>D</h1>
</div>
<div class="e2-item">
<h1>E</h1>
</div>
<div class="e2-item">
<h1>F</h1>
</div>
<div class="e2-item">
<h1>G</h1>
</div>
<div class="e2-item">
<h1>H</h1>
</div>
<div class="e2-item">
<h1>I</h1>
</div>
<div class="e2-item">
<h1>J</h1>
</div>
<div class="e2-item">
<h1>K</h1>
</div>
</div>
<br />
<h1>row-reverse</h1>
<div class="Ejemplo2 flex rs">
<div class="e2-item">
<h1>A</h1>
</div>
<div class="e2-item">
<h1>B</h1>
</div>
<div class="e2-item">
<h1>C</h1>
</div>
<div class="e2-item">
<h1>D</h1>
</div>
<div class="e2-item">
<h1>E</h1>
</div>
<div class="e2-item">
<h1>F</h1>
</div>
<div class="e2-item">
<h1>G</h1>
</div>
<div class="e2-item">
<h1>H</h1>
</div>
<div class="e2-item">
<h1>I</h1>
</div>
<div class="e2-item">
<h1>J</h1>
</div>
<div class="e2-item">
<h1>K</h1>
</div>
</div>
<br />
<h1>column</h1>
<div class="Ejemplo2 flex c">
<div class="e2-item">
<h1>A</h1>
</div>
<div class="e2-item">
<h1>B</h1>
</div>
<div class="e2-item">
<h1>C</h1>
</div>
<div class="e2-item">
<h1>D</h1>
</div>
<div class="e2-item">
<h1>E</h1>
</div>
<div class="e2-item">
<h1>F</h1>
</div>
<div class="e2-item">
<h1>G</h1>
</div>
<div class="e2-item">
<h1>H</h1>
</div>
<div class="e2-item">
<h1>I</h1>
</div>
<div class="e2-item">
<h1>J</h1>
</div>
<div class="e2-item">
<h1>K</h1>
</div>
</div>
<br />
<h1>column-reverse</h1>
<div class="Ejemplo2 flex cr">
<div class="e2-item">
<h1>A</h1>
</div>
<div class="e2-item">
<h1>B</h1>
</div>
<div class="e2-item">
<h1>C</h1>
</div>
<div class="e2-item">
<h1>D</h1>
</div>
<div class="e2-item">
<h1>E</h1>
</div>
<div class="e2-item">
<h1>F</h1>
</div>
<div class="e2-item">
<h1>G</h1>
</div>
<div class="e2-item">
<h1>H</h1>
</div>
<div class="e2-item">
<h1>I</h1>
</div>
<div class="e2-item">
<h1>J</h1>
</div>
<div class="e2-item">
<h1>K</h1>
</div>
</div>
<br />
<h1>flex-wrap</h1>
<p>
La propiedad flex-wrap especifica si los elementos flexibles deben
ajustarse al contenedor o no. Nota: Si los elementos no son elementos
flexibles, la propiedad flex-wrap no tiene efecto.
</p>
<div class="flex-wrap flex">
<div class="wrap-item">
<h1>A</h1>
</div>
<div class="wrap-item">
<h1>B</h1>
</div>
<div class="wrap-item">
<h1>C</h1>
</div>
<div class="wrap-item">
<h1>D</h1>
</div>
<div class="wrap-item">
<h1>E</h1>
</div>
<div class="wrap-item">
<h1>F</h1>
</div>
<div class="wrap-item">
<h1>G</h1>
</div>
<div class="wrap-item">
<h1>H</h1>
</div>
<div class="wrap-item">
<h1>I</h1>
</div>
<div class="wrap-item">
<h1>J</h1>
</div>
<div class="wrap-item">
<h1>K</h1>
</div>
</div>
<br />
<h1>flex-nowrap</h1>
<div class="flex-nowrap flex">
<div class="wrap-item">
<h1>A</h1>
</div>
<div class="wrap-item">
<h1>B</h1>
</div>
<div class="wrap-item">
<h1>C</h1>
</div>
<div class="wrap-item">
<h1>D</h1>
</div>
<div class="wrap-item">
<h1>E</h1>
</div>
<div class="wrap-item">
<h1>F</h1>
</div>
<div class="wrap-item">
<h1>G</h1>
</div>
<div class="wrap-item">
<h1>H</h1>
</div>
<div class="wrap-item">
<h1>I</h1>
</div>
<div class="wrap-item">
<h1>J</h1>
</div>
<div class="wrap-item">
<h1>K</h1>
</div>
</div>
<br />
<h1>flex-wrap-reverse</h1>
<div class="flex-wrap-reverse flex">
<div class="wrap-item">
<h1>A</h1>
</div>
<div class="wrap-item">
<h1>B</h1>
</div>
<div class="wrap-item">
<h1>C</h1>
</div>
<div class="wrap-item">
<h1>D</h1>
</div>
<div class="wrap-item">
<h1>E</h1>
</div>
<div class="wrap-item">
<h1>F</h1>
</div>
<div class="wrap-item">
<h1>G</h1>
</div>
<div class="wrap-item">
<h1>H</h1>
</div>
<div class="wrap-item">
<h1>I</h1>
</div>
<div class="wrap-item">
<h1>J</h1>
</div>
<div class="wrap-item">
<h1>K</h1>
</div>
</div>
<br />
<br />
<br />
<h1>justify-content:flex-start (Default)</h1>
<div class="justity flex">
<div class="wrap-item">
<h1>A</h1>
</div>
<div class="wrap-item">
<h1>B</h1>
</div>
<div class="wrap-item">
<h1>C</h1>
</div>
</div>
<h1>justify-content: flex-end</h1>
<div class="justity-flex-end flex">
<div class="wrap-item">
<h1>A</h1>
</div>
<div class="wrap-item">
<h1>B</h1>
</div>
<div class="wrap-item">
<h1>C</h1>
</div>
</div>
<h1>justify-content: center</h1>
<div class="justity-flex-center flex">
<div class="wrap-item">
<h1>A</h1>
</div>
<div class="wrap-item">
<h1>B</h1>
</div>
<div class="wrap-item">
<h1>C</h1>
</div>
</div>
<h1>justify-content: space-between</h1>
<div class="justity-flex-sb flex">
<div class="wrap-item">
<h1>A</h1>
</div>
<div class="wrap-item">
<h1>B</h1>
</div>
<div class="wrap-item">
<h1>C</h1>
</div>
</div>
<h1>justify-content: space-around</h1>
<div class="justity-flex-sa flex">
<div class="wrap-item">
<h1>A</h1>
</div>
<div class="wrap-item">
<h1>B</h1>
</div>
<div class="wrap-item">
<h1>C</h1>
</div>
</div>
<h1>justify-content: space-evenly</h1>
<div class="justity-flex-se flex">
<div class="wrap-item">
<h1>A</h1>
</div>
<div class="wrap-item">
<h1>B</h1>
</div>
<div class="wrap-item">
<h1>C</h1>
</div>
</div>
<br />
<br />
<h1>order</h1>
<div class="order flex">
<div class="or-item">
<h1>A</h1>
</div>
<div class="or-item">
<h1>B</h1>
</div>
<div class="or-item">
<h1>C</h1>
</div>
<div class="or-item">
<h1>D</h1>
</div>
<div class="or-item">
<h1>E</h1>
</div>
</div>
<br />
<br />
<h1>flex-grow</h1>
<p>
La propiedad flex-grow especifica cuánto crecerá el artículo en relación
con el resto de los artículos flexibles dentro del mismo contenedor.
</p>
<div class="flex-grow">
<div class="flex-grow-item">A</div>
<div class="flex-grow-item">B</div>
<div class="flex-grow-item">C</div>
</div>
</body>
</html>
href="./flex.css"
? Yo probé el código en un snippet y pone todos los tamaños en 25px – A. Cedano el 17 mar. 20 a las 17:2325px
. Si es así, entonces el problema esflex.css
y tendrás que revisar en ese archivo qué regla te está fastidiando los tamaños. – A. Cedano el 17 mar. 20 a las 18:26em
es una unidad de medida comopx
,rem
y otras. – A. Cedano el 17 mar. 20 a las 19:09