본문 바로가기
HTML과 CSS/CSS

CSS Flexbox 연습

by 남녀칠세부동산! 2024. 4. 9.

1. 디펜스 게임을 하다 보면, Flex를 잘하게 됩니다.  

https://flexboxfroggy.com/#ko 개구리 Flex게임을 먼저 하고 오는 걸 추천합니다.

 

http://www.flexboxdefense.com/

 

Flexbox Defense

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

www.flexboxdefense.com

 

2. 정답 공개

 

<1단계>

.tower-group-1 {
    display: flex;
    justify-content:center;
}

 

 

<2단계>

.tower-group-1 {
    display: flex;
    justify-content:flex-end;
}
.tower-group-2 {
    display: flex;
    justify-content:center;
}
.tower-group-3 {
    display: flex;
    justify-content:flex-end;
}

'HTML과 CSS > CSS' 카테고리의 다른 글

CSS Grid 연습게임  (0) 2024.04.09
CSS의 flex연습하기 좋은 사이트  (0) 2024.04.09
CSS의 선택자 연습 게임, 정답 공개  (0) 2024.04.09
마우스 오버 시 이미지 커지는 것  (0) 2024.04.08
무료 스타일시트 CSS  (0) 2024.04.08