CSS:Flexbox: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
(새 문서: == 개요 == 다양한 위치지정 등을 자동으로 계산해주어 반응형으로 위치를 자동으로 바꾸어 정렬한다. 레이아웃을 만들기 위한 강력한 도...) |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
== 개요 == | ==개요== | ||
일반적으로 | |||
다양한 위치지정 등을 자동으로 계산해주어 반응형으로 위치를 자동으로 바꾸어 정렬한다. | 다양한 위치지정 등을 자동으로 계산해주어 반응형으로 위치를 자동으로 바꾸어 정렬한다. | ||
레이아웃을 만들기 위한 강력한 도구. | 레이아웃을 만들기 위한 강력한 도구. | ||
== 성질 == | ==성질== | ||
부모에게 주는 속성과 자식에게 주는 속성으로 나뉜다. | 부모에게 주는 속성과 자식에게 주는 속성으로 나뉜다. | ||
css로 작성한다. | css로 작성한다. | ||
=== 부모의 성질 === | ===부모의 성질=== | ||
<syntaxhighlight lang="css+smarty"> | <syntaxhighlight lang="css+smarty"> | ||
#container{ | #container{ | ||
| 22번째 줄: | 24번째 줄: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== 자식의 성질 === | ===자식의 성질=== | ||
<syntaxhighlight lang="css+smarty"> | <syntaxhighlight lang="css+smarty"> | ||
#container .items{ | #container .items{ | ||
2021년 6월 1일 (화) 20:28 판
개요
일반적으로
다양한 위치지정 등을 자동으로 계산해주어 반응형으로 위치를 자동으로 바꾸어 정렬한다.
레이아웃을 만들기 위한 강력한 도구.
성질
부모에게 주는 속성과 자식에게 주는 속성으로 나뉜다.
css로 작성한다.
부모의 성질
#container{
/*기본적으로 가로정렬. colum으로 두면 세로정렬*/
flex-direction: row;
/*메인축 정렬. center, end, space-between(요소별로 여백 주기) 등 정렬을 정한다.*/
justify-content:
/*서브축 정렬. 다양한 옵션이 가능하다.*/
align-content: center;
}
자식의 성질
#container .items{
}