Daum 웹표준을다루다 Web Standards Darum

.container{display:flex} /* 블록 레벨 */
.container{display:inline-flex} /* 인라인 레벨 */

• 어떤 방향으로든 정렬할 수 있습니다.
• 순서를 뒤집거나 원하는 순서로 배치할 수 있습니다.
• 브라우저(스크린)화면크기에 반응하여 유동적으로 크기를 변경할 수 있습니다.
• 형제요소나 부모요소에 영향을 주지 않고 정렬이 가능합니다.

.container{flex-direction:column-reverse} /* 아래서 위로 */
.container{flex-direction:column} /* 위에서 아래로 */
.container{flex-direction:row} /* 기본값 : 왼쪽에서 오른쪽으로 */
.container{flex-direction:row-reverse} /* 오른쪽에서 왼쪽으로 */

• 기본적으로 flexible item을 모두 한 줄로 정렬됩니다. 속성에 따라 변경 할 수 있습니다.

.container{flex-wrap:nowrap} /* 기본값 : 단일라인 왼쪽에서 오른쪽으로 */
.container{flex-wrap:wrap} /* 멀티라인 왼쪽에서 오른쪽으로 */
.container{flex-wrap:wrap-reverse} /* 멀티라인 오른쪽에서 왼쪽으로 *

.container{justify-content:flex-start} /* 기본값 : 왼쪽정렬 */
.container{justify-content:flex-end} /* 오른쪽 정렬 */
.container{justify-content:center} /* 가운데 정렬 */
.container{justify-content:space-between} /* flex item들간의 공간을 동일하게 주며 정렬 */
.container{justify-content:space-around} /* flex item의 좌우 여백을 동일하게 주며 정렬(여백은 겹치지 않습니다.) */

.container{align-items:flex-start} /* 위로 정렬 */
.container{align-items:flex-end} /* 아래로 정렬 */
.container{align-items:center} /* 가운데로 정렬 */
.container{align-items:baseline} /* flex item들의 인라인요소(텍스트)들이 같은 라인으로 정렬 */
.container{align-items:stretch} /* 기본값 : 꽉차게 노출 */

• 라인이 두줄 이상일 경우 라인들의 세로정렬 속성

.container{align-content:flex-start} /* 위로 정렬 */
.container{align-content:flex-end} /* 아래로 정렬 */
.container{align-content:center} /* 가운데로 정렬 */
.container{align-content:space-stretch} /* 기본값 : 꽉차게 노출 */
.container{align-content:space-between} /* 라인들간의 공간을 동일하게 주며 정렬 */
.container{align-content:space-around} /* 라인들간의 상하여백을 동일하게 주며 정렬(여백은 겹치지 않습니다.) */

• number : 플렉스 항목의 순서를 지정합니다. (기본값 0 / 정수 단위)
• initial : 이 속성의 기본값을 따릅니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

.item1{order:2}
.item2{order:4}
.item3{order:1}
.item4{order:5}
.item5{order:3}

• number : 플렉스 항목의 순서를 지정합니다. (기본값 0 / 정수 단위)
• initial : 이 속성의 기본값을 따릅니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

.item1{flex-grow:1}
.item2{flex-grow:2}

• number : 축소시킬 값을 지정합니다. (기본값 1 / 정수 단위)
• initial : 이 속성의 기본값을 따릅니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

.item1{flex-shrink:1}
.item2{flex-shrink:3}

• number : 기본값을 px,pt,%, em 등으로 지정할 수 있습니다.
• auto : 기본값. 길이는 플렉스 항목(flexible item) 길이와 같습니다.
• initial : 이 속성의 기본값을 따릅니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

.item1{flex-basis:40px}
.item2{flex-basis:80px}

• flex-glow : 확장할 값을 지정합니다.
• flex-shrink : 축소할 값을 지정합니다.
• flex-basis : item의 길이를 지정합니다.
• auto : 1 1 auto
• initial : 0 1 auto
• none : 0 0 auto

/* Two values: flex-grow | flex-basis */
.item{flex:1 30px}
 
/* Two values: flex-grow | flex-shrink */
.item2{flex:2 2}
 
/* Three values: flex-grow | flex-shrink | flex-basis */
.item3{flex:2 2 10%}
 
/* Global values */
.item{flex:auto}
.item{flex:none}}

• stretch : 컨테이너에 맞춰 모든 플렉스 항목들의 높이값이 동일하도록 조정합니다. (기본값)
• flex-start : 플렉스 컨테이너의 시작 부분(왼쪽)에 위치합니다. 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정됩니다.
• flex-end : 플렉스 항목들을 컨테이너의 아래쪽으로 위치합니다.
• center : 각 항목의 위 아래 잔여 공간을 동일하게 분배하기 때문에 각 항목이 수직을 기준으로 중앙에 정렬합니다.
• baseline : 모든 플렉스 항목을 콘텐츠에 지정된 기준선을 중심으로 정렬합니다. 기준선은 각 항목마다 다를 수 있습니다.
• initial : 이 속성의 기본값을 따릅니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

.item{align-self:center}
.item:nth-child(1){align-self:flex-start} /* 컨테이너의 시작 부분(왼쪽)에 위치 */
.item:nth-child(3){align-self:flex-end} /* 컨테이너의 아래쪽으로 위치 */

• 모바일용 CSS 코드를 먼저 작성하고 미디어쿼리로 감싸지 않음.
• IE 6~8 을 위한 JS 라이브러리

• CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)

  /* 1. 공통 (Reset, Common) */
   
  /* 2. 모바일 (뷰포트너비 640px 미만) */
  .sample {background-color:black}
   
  /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 640ox 이상) */
  @media all and (min-width:640px) {
      .sample {background-color:red}
  }
   
  /* 4. PC (해상도 1024px 이상) */
  @media all and (min-width:1024px) {
      .sample {background-color:green}
  }

  • 디자인에 따라 미디어쿼리 분기점은 조정 가능.
• IE 6~8 을 위한 JS 라이브러리

  < head>
  <!--[if lt IE 9]>
  	<script type="text/javascript" src="respond.min.js"></script>
  <![endif]-->
  < /head>
   
  <!-- respond.min.js 라이브러리를 사용하면 IE 6~8 브라우저도 미디어쿼리를 해석할 수 있다. (라이센스: MIT.) -->>

  • ie 6~8 Media Queries 대응을 위한 스크립트 - https://github.com/scottjehl/Respond/
  • respond.min.js 유의사항
    • 로컬 환경에서 동작하지 않음.
    • 미디어쿼리 작성시 all and 키워드를 생략하면 동작하지 않음.

      @media all and (조건문){실행문}

  • 페이지가 무거운 경우 미디어쿼리 구문 안쪽 코드가 늦게 표시되어 IE 6~8 브라우저에서 모바일 화면이 잠깐 노출될 수 있음.

• CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)

  /* 1. 공통 (Reset, Common) */
   
  /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
  .sample {background-color:black}
   
  /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
  @media all and (min-width:640px) and (orientation:landscape){
      .sample {background-color:green}
  }
   
  /* 4. Tablet 세로(Portrait) (해상도 768x 이상) */
  @media all and (min-width:768px) and (orientation:portrait){
      .sample {background-color:red}
  }
   
  /* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
  @media all and (min-width:1024px) and (orientation:landscape){
      .sample {background-color:blue}
  }
   
  /* 6. PC (해상도 1025px 이상) */
  @media all and (min-width:1025px){
      .sample {background-color:yellow}
  }

/* 4. Tablet 세로(Landscape) (해상도 768x 이상) */
@media all and (min-width:768px) and (orientation:portrait){
    html:not(.pc) .sample {background-color:red}
}
 
/* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
@media all and (min-width:1024px) and (orientation:landscape){
    html:not(.pc) .sample {background-color:blue}
}
						

• CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)

  /* 1. 공통 (Reset, Common) */
   
  /* 2. PC (해상도 1024px 이상) */
  .sample {background-color:black}
   
  /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 1024px 이하) */
  @media all and (max-width:1024px) {
      .sample {background-color:red}
  }
   
  /* 4. 모바일 (해상도 640px 이하) */
  @media all and (max-width:640px) {
      .sample {background-color:green}
  }

• CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)

  /* 1. 공통 (Reset, Common) */
   
  /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
  .sample {background-color:black}
   
  /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
  @media only screen and (min-width :640px) {
      .sample {background-color:green}
  }