CSS:Flexbox: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
편집 요약 없음
 
(같은 사용자의 중간 판 하나는 보이지 않습니다)
1번째 줄: 1번째 줄:
{{CSS}}
==개요==
==개요==
일반적으로  
일반적으로  
5번째 줄: 7번째 줄:


레이아웃을 만들기 위한 강력한 도구.
레이아웃을 만들기 위한 강력한 도구.
==성질==
부모에게 주는 속성과 자식에게 주는 속성으로 나뉜다.
css로 작성한다.
===부모의 성질===
<syntaxhighlight lang="css+smarty">
#container{
    /*기본적으로 가로정렬. colum으로 두면 세로정렬*/
    flex-direction: row;
    /*메인축 정렬. center, end, space-between(요소별로 여백 주기) 등 정렬을 정한다.*/
    justify-content:
    /*서브축 정렬. 다양한 옵션이 가능하다.*/
    align-content: center;
   
}
</syntaxhighlight>
===자식의 성질===
<syntaxhighlight lang="css+smarty">
#container .items{
}
</syntaxhighlight>
[[분류:정보]]

2021년 6월 4일 (금) 10:08 기준 최신판

틀:CSS. css에 대한 문서들을 담아두기 위한 틀.

  1. CSS:개요
  2. CSS:선택자
  3. CSS:크기척도
  4. CSS:텍스트
  5. CSS:아이콘
  6. CSS:속성
    1. CSS:색
    2. CSS:위치와 모양
    3. CSS:Flexbox
    4. CSS:기타속성
  7. CSS:변수
  8. CSS:진한쌤의 의문

개요[편집 | 원본 편집]

일반적으로

다양한 위치지정 등을 자동으로 계산해주어 반응형으로 위치를 자동으로 바꾸어 정렬한다.

레이아웃을 만들기 위한 강력한 도구.