Skip to content

align-items.md

Latest commit

 

History

History
135 lines (116 loc) · 4.14 KB

align-items.md

File metadata and controls

135 lines (116 loc) · 4.14 KB

align-items

작성자 : 송지은

작성일 : 2015-09-27

css 레퍼런스 설명:

  • align-items : flex로 지정된 부모 요소 내에서 모든 flex 항목의 기본 정렬을 지정하는 속성이다.

  • syntax :

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

stretch : 기본 값. 항목이 부모 요소에 크기에 맞게 채워지고 같은 크기로 분할 된다.

center : 항목이 부모 요소의 중간 위치에 정렬된다.

flex-start : 부모 요소의 시작 기준선에 일치하여 정렬된다.

flex-end : 부모 요소의 끝나는 기준선에 일치하여 정렬된다.

baseline : 부모 요소의 기준선에 일치하여 정렬된다.

initial : 기본 초기값이다.

inherit : 부모 요소에 적용된 이 속성 값을 상속한다.

sample code :

<!DOCTYPE html>
<html>
  <head>
    <style>
      #main {
          width: 220px;
          height: 300px;
          border: 1px solid black;
          display: -webkit-flex; /* Safari */
          -webkit-align-items: center; /* Safari 7.0+ */
          display: flex;
          align-items: center;
      }

      #main div {
         -webkit-flex: 1; /* Safari 6.1+ */
         flex: 1;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div style="background-color:coral;">RED</div>
      <div style="background-color:lightblue;">BLUE</div>
      <div style="background-color:lightgreen;">Green div with more content.</div>
    </div>
  </body>
</html>

결과보기 >

참고 :

  • 인터넷 익스플로러 10 및 이하 버전에서는 align-content 속성을 지원하지 않는다.
  • 사파리 7.0 및 최신 버전에서는 -webkit-align-content 속성을 지원한다.

목록