9. CSS Flexbox
https://flexboxfroggy.com/
https://codepen.io/enxaneta/full/adLPwv
flexbox는 상위요소인 flex container와 하위 자식요소인 flex item들로 구성됨
즉, item이 수평정렬할 요소들이면,
해당 요소를 감싸고 있는 부모요소로 flex container가 필수적임.
1) flexbox container 속성
display : flex container 정의
flex-direction : item들의 주축 (방향)을 설정
flex-wrap : item들을 1행 또는 복수행으로 배치하는 설정
flex-flow : flex-direction과 flex-wrap을 한번에 설정하는 단축속성
flex-flow : direction과 wrap값
justify-content : 가로기준 배치 방법
align-content : 수직정렬 방법 (각 행 마다 적용)
align-items : 수직정렬 방법 (복수행이면 하나의 그룹처럼 적용)
2) flexbox item 속성
order : 배치순서 설정
flow-grow : item 너비 증가 비율 설정
flex-shrink : item 너비 축소 비율
flex-basis : item 기본 너비 설정
flex : 위의 3개를 한번에 설정
align-self : 요소하나하나 정렬
<!DOCTYPE html> flexxx박스
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
border: 1px solid red;
/* display: flex; 가로로 펴침 */
/* flex-direction: column; */
}
.item{
border: 1px solid blue;
width: 100px;
height: 100px;
}
/* .item1{
order: 3 순서바꾸기 */
}
</style>
</head>
<body>
<div class="container">
<div class="item1 item"> </div>
<div class="item2 item"> </div>
<div class="item3 item"> </div>
</div>
</body>
</html>'WEB Creator > [CSS]' 카테고리의 다른 글
| [CSS + HTML] 간단 사이트 (0) | 2022.06.07 |
|---|---|
| [CSS] 8 - media query 미디어쿼리 (0) | 2022.06.07 |
| [CSS] 7 - 포지셔닝 (0) | 2022.06.07 |
| [CSS] 3 - 적용 스타일과 박스 모델 (0) | 2022.05.31 |
| [CSS] 2 - 선택자 (0) | 2022.05.31 |