CSS - flex-direction: column-reverse; no funciona

 
Vista:
Imágen de perfil de Jhon Jairo
Val: 8
Ha disminuido su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

flex-direction: column-reverse; no funciona

Publicado por Jhon Jairo (5 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
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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

flex-direction: column-reverse; no funciona

Publicado por xve (489 intervenciones) el 29/06/2018 11:57:19
Hola Jhon, a mi me ha funcionado con tu contenido... he puesto este estilo:

1
2
3
4
5
6
7
8
.contenedor{
	width: 80%;
	height: 500px;
	background: #FF5C29;
	margin: 50px auto;
	display: flex;
	flex-direction: column-reverse;  /*Con el orden invertido */
}

Recuerda que los comentarios en los estilos no funciona con //

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Jhon Jairo
Val: 8
Ha disminuido su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

flex-direction: column-reverse; no funciona

Publicado por Jhon Jairo (5 intervenciones) el 30/06/2018 06:05:13
Es muy raro, quité los comentarios y funcionó, se los fui poniendo y vi que a veces quedaban pedazos no bien definidos... sin embargo los puse todos de nuevo con cuidado y ahora funciona.

Ah y se me había ido un comentario mal marcado con //
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar