Sobre a Aula
Flex Items e Flex Direction
Os “Flex Items” são os elementos dentro de um Flex Container que são organizados e alinhados usando o Flexbox. A propriedade flex-direction
controla a direção em que esses itens são dispostos.
Existem quatro valores principais para flex-direction
:
row
: Os itens são dispostos em uma linha horizontal (padrão).row-reverse
: Os itens são dispostos em uma linha horizontal reversa.column
: Os itens são dispostos em uma coluna vertical.column-reverse
: Os itens são dispostos em uma coluna vertical reversa.
A escolha de flex-direction
afeta a direção na qual os itens fluem dentro do Flex Container.
Vamos exemplificar:
Exemplo 1: flex-direction: row;
HTML
<div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div>
CSS
.flex-container { display: flex; flex-direction: row; border: 1px solid; height: 150px; } .flex-item { padding: 10px; margin: 5px; border: 1px solid #ccc; }
Exemplo 2: flex-direction: row-reverse;
HTML
<div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div>
CSS
.flex-container { display: flex; flex-direction: row-reverse; border: 1px solid; height: 150px; } .flex-item { padding: 10px; margin: 5px; border: 1px solid #ccc; }
Exemplo 3: flex-direction: column;
HTML
<div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div>
CSS
.flex-container { display: flex; flex-direction: column; border: 1px solid; height: 150px; } .flex-item { padding: 10px; margin: 5px; border: 1px solid #ccc; }
Exemplo 4: flex-direction: column-reverse;
HTML
<div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div>
CSS
.flex-container { display: flex; flex-direction: column-reverse; border: 1px solid; height: 150px; } .flex-item { padding: 10px; margin: 5px; border: 1px solid #ccc; }
Visualização
Entrar na conversa