Se você reparar bem nos sites que você entra, verá que todas as informações dos layouts são divididas de alguma forma. Seja em colunas ou em linhas.
O legal do css é que você pode brincar de organizar os elementos da sua página da forma que quiser. E o flexbox é nosso grande aliado nisso pois com ele podemos juntar um bloco com outro deixando todos eles enfileirados, ou um do lado do outro, ou também um na esquerda e outro laaa na direita, enfim... muitas formas!!
E é por isso que eu decidi criar esse repositório, porque apesar de ser uma ferramenta muito boa, as vezes é difícil de entender o conceito, e eu espero poder te ajudar nisso (e claro, me ajudar a enraizar na minha mente também rs)
Podemos usar o flexbox pelo eixo principal (horizontalmente) e no eixo transversal (vertical)
- Para definir isso usamos FLEX-DIRECTION, que possui 4 componentes:
- row (padrão)
- row-reverse
- column
- column-reverse
É importante saber que o padrão é o row, que foi o mesmo que eu sei para deixar essas duas imagens uma do lado da outra, é só você olhar o código desse README :)
- Enquanto row seus elementos vão se mover "inlinemente", assim você pode por todos os elementos no centro, ou alinhados com uma margem entre eles, ou um de um lado e outro do outro na mesma linha kkkk e vou mostrar como fazer isso usando:
Para poder exemplificar vou usar essas três div que atualmente estão grudadas uma do lado da outra.
...
<style>
section {
display: flex;
}
section div {
background-color: rgb(0,0,0);
width: 100px;
height: 100px;
}
//usei para adicionar cor na div do meio
section div:not(:first-child):not(:last-child) {
background-color: rgb(23, 25, 122);
}
</style>
...
<section>
<div></div>
<div></div>
<div></div>
</section>
...
Para não ficar informações repetidas vou deixar apenas a section que é onde vou mostrar a aplicação do justify-content. No caso debaixo usei center para alinhar nossas três divs no meio do elemento pai que no caso é a section.
...
<style>
section {
display: flex;
justify-content: center;
}
...Ficou assim :
Agora usando start e end:
...
Exemplo com start:
<style>
section {
display: flex;
justify-content: start;
}
</style>
...
Exemplo com end:
<style>
section {
display: flex;
justify-content: end;
}
</style>
...
Então ele alinhará os itens a esquerda ou a direita.
Agora com space-evenly, around e between:
...
Exemplo com space-evenly:
<style>
section {
display: flex;
justify-content: space-evenly;
}
</style>
...
Exemplo com space-between:
<style>
section {
display: flex;
justify-content: space-between;
}
</style>
...
...
Exemplo com space-around:
<style>
section {
display: flex;
justify-content: space-around;
}
</style>
...Space-evenly divide o espaço do elemento igualmente ENTRE E FORA das divs
Space-between divide o espaço entre as divs para fazer o alinhamento
Space-around pega todo o espaço da linha e divide igualmente ENTRE os elementos
- Esses são os mais usados do justify-content agora vamos estudar sobre o :
Para alinhar elementos usando como base o eixo vertical usamos outra propriedade do flexbox que é :
- Possui como valores:
- center
- flex-end
- flex-start
E modifica nossos elementos verticalmente!
Recomendo fortemente que ao acompanhar esse 'tutorial' você vá fazendo, sério, observa o que acontece e também o que não acontece kkkkkkkkk vai te ajudar a saber o que usar em cada situação. A prática é o melhor professor!
E é por isso que vou deixar com vocês para modificar suas divs que estão em row com align-items, e partir para mostrar como funciona quando elas estão com flex-direction: column..
Aqui temos as mesmas divs, mas seu direcionamento é em coluna:
Queria que você testasse o justify-content nelas e ver o que acontece. Não funciona horizontalmente né? Doido isso mas quando você coloca seus elementos em coluna meio que as coisas invertem. (meio não, inverte mesmo)
- se nada acontece veja se tem height suficiente para elas se mexerem... (sim, ja me estressei muito com isso)
Vamos ao código e sua visualização:
...
Exemplo com align-items: center e justify-content: space-around
<style>
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 100vh; --> Para poder aumentar a altura da minha section e ver o comportamento do justify-content
}
</style>
...
Exemplo com align-items: flex-end e justify-content: center
<style>
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
height: 70vh; --> Para poder aumentar a altura da minha section e ver o comportamento do justify-content
}
</style>
...
Exemplo com align-items:flex-start e justify-content: space-between
<style>
section {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
height: 100vh; --> Para poder aumentar a altura da minha section e ver o comportamento do justify-content
}
</style>
- Para demonstrar a diferença vou explicar sobre a propriedade FLEX-WRAP
Basicamente permite que quando não der mais pros elementos ficarem na mesma linha haverá quebra de linha. Então, vou diminuir o tamanho da nossa section ate o ponto de as divs precisarem descer para a linha debaixo.
...
<style>
section {
display: flex;
flex-wrap: wrap;
height: 80vh;
width: 50%;
}
Só alterei o tamanho das divs e acrescentei mais 3 dentro da section!!
div {
background-color: rgb(255, 255, 255);
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>Fica assim na tela:
- Se usarmos o align-items: center, que alinha os ELEMENTOS pelo eixo vertical, notaremos que eles vão preservar uma distância entre os três blocos de cima e os de baixo. Assim:
- Em contrapartida se usarmos o align-content: center, notamos que as 6 divs ficam alinhadas no meio da section. Ou seja, o align-content será útil quando quisermos trabalhar alinhamento entres elementos que NÃO pertencem a mesma linha. Na verdade, ele não alinha os elementos, mas sim as LINHAS em que estes estão posicionados. Legal né?
Vou mostrar agora com flex-start pois os dois tem:
- Código css
...
<style>
section {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
height: 80vh;
width: 50%;
}
</style>
Agora o align-items: flex-start
...
<style>
section {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: 80vh;
width: 50%;
}
</style>
Espero que você tenha entendido até aqui, qualquer coisa estou a disposição no instagram @dev.paola!