Флексбокс, часть 2 / Испытание: гибкий поток [28/28]

Курсы §36. Флексбокс, часть 2
1

Не нашел подобной темы, поэтому решил создать…
Может кому и пригодиться)

.brick-layout {
width: 400px;
padding: 5px;
box-sizing: content-box;
display:flex;
flex-wrap:wrap;
}

.brick-layout .brick {
min-height: 80px;
margin:5px;;
flex-basis:100px;
}

.brick:nth-child(2n-1)
{
flex-grow:0;
}
.brick:nth-child(2n)
{
flex-grow:1;
}

2

без этого работает)

3

.brick-layout {
width: 400px;
padding: 5px;
display: flex;
flex-wrap: wrap;
}
.brick {
min-height: 80px;
margin: 5px;
flex-basis: 100px;
}
.brick:nth-child(even)
{
flex-grow: 1;
}

2 лайка
4

.brick-layout {
display: flex;
flex-wrap: wrap;
width: 400px;
padding: 5px;
box-sizing: content-box;
}

.brick {
flex-basis: 100px;
margin: 5px;
min-height: 80px;
min-width: 50px;
}

.brick:nth-child(2n) {
flex-grow: 1;
}

5

.brick-layout {
width: 400px;
padding: 5px;
box-sizing: content-box;
display: flex;
flex-wrap: wrap;
}

.brick {
min-height: 80px;
margin: 5px;
flex-basis: 100px;
}
.brick:nth-of-type(even) {
flex-grow: 1;
}
Но остаётся чувство, что от меня хотели большего.

1 лайк
6 
.brick-layout {
    width: 400px;
    padding: 5px;
    box-sizing: content-box;
    display: flex;
    flex-wrap: wrap;
}
.brick {
    min-height: 80px;
    min-width: 50px;
    margin: 5px;
}
.brick:nth-child(even){
    flex-basis: 25%;
}
.brick:nth-child(2) {
    flex-grow: 3;
}
.brick:nth-child(5){
    flex-grow: 0;
}
.color-yellow {
    flex-basis: 30%;
    flex-grow: 1;
}
.brick:nth-child(8) {
    flex-grow: 1;
}
7

100%, он немного длиннее, но главное что код рабочий))

.brick-layout {
display: flex;
flex-wrap: wrap;
width: 400px;
padding: 5px;
box-sizing: content-box;
}

.brick {
margin: 5px;
min-height: 80px;
min-width: 50px;
}

.color-aqua {
flex-basis: 100px;
}

.color-yellow {
flex-basis: 100px;
}

.color-fuchsia {
flex-basis: 100px;
}

.brick-layout div:nth-child(2){
flex-grow: 1;
}

.brick-layout div:nth-child(4){
flex-grow: 1;
}

.brick-layout div:nth-child(6){
flex-grow: 1;
}

.brick-layout div:nth-child(8){
flex-grow: 1;
}

8

100%
Ещё один вариант:

.brick-layout {
display: flex;
flex-wrap: wrap;
width: 400px;
padding: 5px;
box-sizing: content-box;
}

.brick {
min-height: 80px;
margin: 5px;
flex-basis: 100px;
}

.brick:nth-of-type(2) {
flex-grow: 1;
}

.brick:nth-of-type(4) {
flex-grow: 1;
}

.brick:nth-of-type(6) {
flex-grow: 1;
}

.brick:nth-of-type(8) {
flex-grow: 1;
}

9

.brick-layout {
width: 400px;
padding: 5px;
box-sizing: content-box;
display: flex;
flex-wrap: wrap;
}
.brick {
min-height: 80px;
flex-basis: 100px;
margin: 5px;
}

.brick:nth-child(even) {
flex-grow: 1;
}

10

.brick-layout {
display: flex;
flex-wrap: wrap;
width: 400px;
padding: 5px;
box-sizing: content-box;
}

.brick {
flex-basis: 100px;
margin: 5px;
min-height: 80px;
min-width: 50px;
}

.brick:nth-child(2n) {
flex-grow: 1;
}