La propiedad de dirección flexible es una subpropiedad del módulo de diseño de caja flexible. Estableció el eje principal del elemento flexible. el eje principal del elemento flexible es el eje principal. No es necesariamente horizontal todo el tiempo, básicamente depende de la propiedad de dirección flexible.
Nota: La propiedad flex es inútil cuando el elemento no es un elemento flexible.
Sintaxis:
flex-direction: row|row-reverse|column|column-reverse;
Valor predeterminado: fila
Valores de propiedad:
fila: organiza la fila de la misma manera que la dirección del texto. El valor predeterminado de la dirección flexible es la fila. Se utiliza para especificar que el elemento tiene una dirección de texto normal. Hace que el elemento siga la dirección normal del texto en las líneas.
Sintaxis:
flex-direction: row;
Ejemplo:
html
<!DOCTYPE html>
<head>
<title>flex-direction property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: row;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-direction:row</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Producción:
fila inversa: esta propiedad se usa para seguir la dirección opuesta al texto. Hace que los elementos flexibles se inviertan exactamente en la dirección opuesta a la dirección del texto, como podemos ver en la Salida.
Sintaxis:
flex-direction: row-reverse;
Ejemplo:
html
<!DOCTYPE html>
<head>
<title>flex-direction property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: row-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-direction:row-reverse</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Producción:
columna: organiza la fila como una columna igual que la dirección del texto pero de arriba a abajo. Se utiliza para especificar que el elemento tiene una dirección normal de arriba a abajo. Hace que el elemento siga la dirección normal de arriba a abajo, como podemos ver en la Salida.
Sintaxis:
flex-direction:column;
Ejemplo:
html
<!DOCTYPE html>
<head>
<title>flex-direction property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: column;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-direction:column</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
Producción:
column-reverse: organiza la fila como una columna igual que la fila inversa de abajo hacia arriba. Se utiliza para especificar que el elemento tiene una dirección normal de abajo hacia arriba. Hace que el elemento siga la dirección normal de abajo hacia arriba, como podemos ver en la Salida.
Sintaxis:
flex-direction:column-reverse;
Ejemplo:
html
<!DOCTYPE html>
<head>
<title>flex-direction property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: column-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-direction:column-reverse</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<title>flex-direction property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: column-reverse;
}
Producción:
Navegadores compatibles:
- Google Chrome 29.0
- Internet Explorer 11.0
- MozillaFirefox 28.0
- Ópera 17.0
- Safari 9.0
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA