Flexbox - Flex-Wrap
Geralmente, em caso de espaço insuficiente para o contêiner, o resto dos itens flexíveis serão ocultados conforme mostrado abaixo.
o flex-wrap propriedade é usada para especificar os controles se o flex-container é de linha única ou multilinha.
usage -
flex-wrap: nowrap | wrap | wrap-reverse
flex-direction: column | column-reverse
Esta propriedade aceita os seguintes valores -
wrap - Em caso de espaço insuficiente para eles, os elementos do recipiente (flexitems) serão enrolados em linhas flexíveis adicionais de cima para baixo.
wrap-reverse - Em caso de espaço insuficiente para eles, os elementos do contêiner (itens flex) serão enrolados em linhas flexíveis adicionais de baixo para cima.
Agora, veremos como usar o wrap propriedade, com exemplos.
embrulho
Ao passar o valor wrap para a propriedade flex-wrap, os elementos do contêiner são organizados horizontalmente da esquerda para a direita, conforme mostrado abaixo.
O exemplo a seguir demonstra o resultado da passagem do valor wrappara a propriedade flex-wrap . Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directionrow.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px solid black;
flex-direction:row;
flex-wrap:wrap;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Isso produzirá o seguinte resultado -
envoltório reverso
Ao passar o valor wrap-reverse para a propriedade flex-wrap, os elementos do contêiner são organizados horizontalmente da esquerda para a direita, conforme mostrado abaixo.
O exemplo a seguir demonstra o resultado da passagem do valor wrap-reversepara a propriedade flex-wrap . Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directionrow.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px solid black;
flex-direction:row;
flex-wrap:wrap-reverse;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Isso produzirá o seguinte resultado -
wrap (coluna)
Ao passar o valor wrap para a propriedade flex-wrap e o valor column para a propriedade flex-direction, os elementos do contêiner são organizados horizontalmente da esquerda para a direita, conforme mostrado abaixo.
O exemplo a seguir demonstra o resultado da passagem do valor wrap ao flex-wrappropriedade. Aqui, estamos criando seis caixas com cores diferentes com o valor flex-directioncolumn.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px solid black;
flex-direction:column;
flex-wrap:wrap;
height:100vh;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Isso produzirá o seguinte resultado -
wrap-reverse (coluna)
Ao passar o valor wrap-reverse para a propriedade flex-wrap e o valor column para a propriedade flex-direction, os elementos do contêiner são organizados horizontalmente da esquerda para a direita, conforme mostrado abaixo.
O exemplo a seguir demonstra o resultado da passagem do valor wrap-reversepara a propriedade flex-wrap . Aqui, estamos criando seis caixas com cores diferentes e com o valor flex-directioncolumn.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px solid black;
flex-direction:column;
flex-wrap:wrap-reverse;
height:100vh;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
Isso produzirá o seguinte resultado -