flex-direction: column-reverse; no funciona
Publicado por Jhon Jairo (13 intervenciones) el 29/06/2018 07:50:25
Hola, estoy siguiendo un tutorial sobre esta propiedad, copié el código de quien lo hizo pero no funciona.
Este es el html
Y estos los estilos que no funcionan en contenedor: flex-direction: column-reverse;
Debería aprecer una columna inversa
Este es el html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="contenedor">
<div class="hijo">A</div>
<div class="hijo">B</div>
<div class="hijo">C</div>
<!--<div class="hijo">C</div>
<div class="hijo">C</div>
<div class="hijo">C</div> --></div>
<br/>
</body>
</html>
Y estos los estilos que no funcionan en contenedor: flex-direction: column-reverse;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
*{
margin: 0; padding: 0;-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}.contenedor{
width: 80%;
height: 500px;background: #FF5C29;
margin: 50px auto;display: flex; //necesita esto
/*flex-direction: row; */ /*usar solo A, B y C */
/*flex-direction: row-reverse;*/ /*Coloca los elementos en línea pero de forma inversa */
/*flex-direction: column; */flex-direction: column-reverse; /*Con el orden invertido */
/*flex-wrap: nowrap; */ /*align-content: space-around; */}.hijo{
background: #00B285;
width: 200px; height: 100px;color:#fff;
margin: 30px; padding: 20px;font-size: 40px;
text-align: center;
}Debería aprecer una columna inversa
Valora esta pregunta
0
