Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 다형성
- GRANT VIEW
- 오라클
- 컬렉션 타입
- EnhancedFor
- 집합_SET
- 참조형변수
- oracle
- 자동차수리시스템
- abstract
- cursor문
- NestedFor
- 메소드오버로딩
- 추상메서드
- 정수형타입
- 자바
- 사용자예외클래스생성
- 인터페이스
- 객체 비교
- exception
- 컬렉션프레임워크
- 한국건설관리시스템
- 대덕인재개발원
- 예외미루기
- 환경설정
- 어윈 사용법
- 생성자오버로드
- 제네릭
- 예외처리
- Java
Archives
- Today
- Total
거니의 velog
CSS Flex 속성 본문
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
studiomeal.com
#pond {
display: flex;
justify-content: flex-end;
}
![](https://blog.kakaocdn.net/dn/M2AYZ/btsFRtO0o4Z/dS2X9nhx3H1pKelaMg1Z70/img.png)
#pond {
display: flex;
justify-content: center;
}
![](https://blog.kakaocdn.net/dn/d8ZaPY/btsFU9azDa4/9mP9KhYiVyK6VurAk0L2I1/img.png)
#pond {
display: flex;
justify-content: space-around;
}
![](https://blog.kakaocdn.net/dn/cTVd9c/btsFT1qQ1qK/MqhRFkDNhmkj4sVqsKIdD0/img.png)
#pond {
display: flex;
justify-content: space-between;
}
![](https://blog.kakaocdn.net/dn/bC0qpN/btsFUDiHPN3/DrVXViA4TVgW7rnhongWVk/img.png)
#pond {
display: flex;
align-items: flex-end;
}
![](https://blog.kakaocdn.net/dn/buIRU3/btsFU6yaeV4/XAkU0jFzV9Zqg8kmu6z4Kk/img.png)
#pond {
display: flex;
justify-content: center;
align-items: center;
}
![](https://blog.kakaocdn.net/dn/bRtEyS/btsFQWxvXiO/TATq0TcAWQ3Tx5GLBURWy1/img.png)
#pond {
display: flex;
justify-content: space-around;
align-items: flex-end;
}
![](https://blog.kakaocdn.net/dn/bAo3Wc/btsFRiAjZOr/A8ae32VR5hWyghlww9gBd1/img.png)
#pond {
display: flex;
flex-direction: row-reverse;
}
![](https://blog.kakaocdn.net/dn/bAxSj8/btsFUlo5zri/nWfvxuzSCqbDoksFdP2io0/img.png)
#pond {
display: flex;
flex-direction: column;
}
![](https://blog.kakaocdn.net/dn/X9BCt/btsFUCYnYzC/hjuszxViM3UFqwi3gbftwK/img.png)
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
![](https://blog.kakaocdn.net/dn/bLXvjH/btsFU0Y7j1z/KRA1nFrdkkAdqDXrjOuLK1/img.png)
#pond {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
![](https://blog.kakaocdn.net/dn/bvdYRn/btsFUmnZGmK/PJtrE1lHUkOMdr4ByODaek/img.png)
#pond {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}
![](https://blog.kakaocdn.net/dn/cGguyq/btsFTcFW8pz/iYfcu8155DQkkQXmaPbc91/img.png)
#pond {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
}
![](https://blog.kakaocdn.net/dn/bbexoT/btsFSZ7TdOf/KTZ0MssZRcrurYqORZIziK/img.png)
#pond {
display: flex;
}
.yellow {
order: 1;
}
![](https://blog.kakaocdn.net/dn/xzBMP/btsFUDXiFAb/12xPKxbR5s6dcAaIvtzNXk/img.png)
#pond {
display: flex;
}
.red {
order: -3;
}
![](https://blog.kakaocdn.net/dn/L4QxI/btsFUJQLCwL/IxeRFUKldwEJwwxYpVQ390/img.png)
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
align-self: flex-end;
}
![](https://blog.kakaocdn.net/dn/cFazJe/btsFRrp6gHI/P8PoKzXFkjZfbYQVmEAwSk/img.png)
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
order: 1;
align-self: flex-end;
}
![](https://blog.kakaocdn.net/dn/cqNc17/btsFQtIY1A1/90AHkzV3RNNcURyRfhWle1/img.png)
#pond {
display: flex;
flex-wrap: wrap;
}
![](https://blog.kakaocdn.net/dn/bgdPe3/btsFRkdSjmW/JXKRk6jnez9nfKRcZ7Thn1/img.png)
#pond {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
![](https://blog.kakaocdn.net/dn/tbXS7/btsFQWROGOI/n624oV7k6ll5sjKFfXpIdk/img.png)
#pond {
display: flex;
flex-flow: column wrap;
}
![](https://blog.kakaocdn.net/dn/Vqt07/btsFUG7yr3N/w2tw9dylJg2lcfWAeA0BHk/img.png)
#pond {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
![](https://blog.kakaocdn.net/dn/tT0E1/btsFRiUCSaR/kBE8NdETi75seVrkON5kK1/img.png)
#pond {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
![](https://blog.kakaocdn.net/dn/k0un6/btsFT0Fwm78/stJ7K0azOjjLGpjG4ZoGi0/img.png)
#pond {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-content: center;
}
![](https://blog.kakaocdn.net/dn/JwBhc/btsFUl3HRMm/E4nIJZYmviGg3ZyAKD0SHK/img.png)
#pond {
display: flex;
flex-flow: column-reverse wrap-reverse;
align-content: space-between;
justify-content: center;
}
![](https://blog.kakaocdn.net/dn/LnGMt/btsFR0FXmUF/hiGCwQuihILSV6oy35mP30/img.png)
#pond {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: space-between;
justify-content: center;
}
![](https://blog.kakaocdn.net/dn/crpVZq/btsFTY8J5hs/vr8YZmDokRPUoN61zFA6b1/img.png)
'etc 이슈' 카테고리의 다른 글
CSS 스크롤바 숨기기 (0) | 2024.03.21 |
---|---|
깃 배쉬 사용법 (0) | 2024.03.18 |
(1) 네트워크 이론 1 (0) | 2023.10.30 |
[MySQL5.7] 한글깨짐 character set UTF8 설정하기 (0) | 2023.08.01 |