๐ค ๋ฌธ์ ๋งํฌ : Flexbox Defense
CSS ์ฝ๋๋ก ๊ฐ๊ตฌ๋ฆฌ๊ฐ ์๋ จ์์ ์ฌ๋ผ๊ฐ ์ ์๋๋ก ๋๊ธฐ
โ ๋จ๊ณ 1
#pond {
display: flex;
justify-content: flex-end;
}
โ ๋จ๊ณ 2
#pond {
display: flex;
justify-content: center;
}
โ ๋จ๊ณ 3
#pond {
display: flex;
justify-content: space-around;
}
โ ๋จ๊ณ 4
#pond {
display: flex;
justify-content: space-between;
}
โ ๋จ๊ณ 5
#pond {
display: flex;
align-items: flex-end;
}
โ ๋จ๊ณ 6
#pond {
display: flex;
justify-content: center;
align-items: center;
}
โ ๋จ๊ณ 7
#pond {
display: flex;
justify-content: space-around;
align-items: flex-end;
}
โ ๋จ๊ณ 8
#pond {
display: flex;
flex-direction: row-reverse;
}
โ ๋จ๊ณ 9
#pond {
display: flex;
flex-direction: column;
}
โ ๋จ๊ณ 10
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
โ ๋จ๊ณ 11
#pond {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
โ ๋จ๊ณ 12
#pond {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}
โ ๋จ๊ณ 13
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
}
โ ๋จ๊ณ 14
#pond {
display: flex;
}
.yellow {
order: 1;
}
โ ๋จ๊ณ 15
#pond {
display: flex;
}
.red {
order: -1;
}
โ ๋จ๊ณ 16
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
align-self: flex-end;
}
โ ๋จ๊ณ 17
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
order: 1;
align-self: flex-end;
}
โ ๋จ๊ณ 18
#pond {
display: flex;
flex-wrap: wrap;
}
โ ๋จ๊ณ 19
#pond {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
โ ๋จ๊ณ 20
#pond {
display: flex;
flex-flow: column wrap;
}
โ ๋จ๊ณ 21
#pond {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
โ ๋จ๊ณ 22
#pond {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
โ ๋จ๊ณ 23
#pond {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-content: center;
}
โ ๋จ๊ณ 24
#pond {
display: flex;
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
}
โ 2022.02.26