• 회원가입
  • 로그인
  • 구글아이디로 로그인

[flex] CSS - align-items 속성(C) ★★★ - 교차축에서 아이템 정렬. (= align-items속성 = 얼라인아이템즈속성) ※ 플렉스 컨테이너용 속성 ※ 세로 가운데 정렬 ※ 아이템 수직정렬

목차
  1. align-items 예제 - 교차축에서 아이템 정렬
  2. align-items 정의
  3. align-items 구문
  4. align-items 예제 - 세로 가운데 정렬

 

align-items 예제 - 교차축에서 아이템 정렬 

 

<style> 

#hz {

  width: 200px;

  height: 300px;

  border: 1px solid silver; 

  display: -webkit-flex; /* Safari */

  -webkit-align-items: center; /* Safari */

  display: flex;

  align-items: center;

}


#hz div {

   -webkit-flex: 1; /* Safari  */

   flex: 1;

}

</style>


<div id="hz">

  <div style="background-color:coral;">HTML</div>

  <div style="background-color:lightblue;">CSS</div>  

  <div style="background-color:lightgreen;">홈짱닷컴 Homzzang.com</div>

</div>

 

결과보기

 

align-items 정의

 

교차축 (=반대축) 기준으로 아이템 배치・정렬.

 


 

1.

align-items 속성 재정의하려면, 각 아이템의 align-self 속성 사용.

 

2.

  • 기본값: stretch
  • 상속여부: X
  • 애니효과: X
  • CSS버전: CSS3
  • JS구문: object.style.alignItems="center"

 

3.

IE11 이상 주요 브라우저 모두 지원.
단, 일부 사파리 구버전 경우 -webkit- 접두어 필요.

 

4. MDN align-item 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

 

 

align-items 구문

 

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

 


[속성값]

 

  • stretch - 교차축 양끝 기준으로 상하로 쭈욱 늘어남. (기본값) 
  • center - 교차축 중단에 아이템 배치.
  • flex-start - 교차축 앞단에 아이템 배치.
  • flex-end - 교차축 끝단에 아이템 배치.
  • baseline - 아이템 안 텍스트 기본라인에 맞춰 교차축 상 배치. 
  • initial - 이 속성의 기본값으로 설정
  • inherit - 부모요소 속성값 상속

 

PS. 예제의 핑크색 부분을 바꿔가며 확인 바람.

 

align-items 예제 - 세로 가운데 정렬

 

<style>

#hz {

  border: 1px solid silver;

  height:300px;

  width:300px;

  flex: 1;

  display: -webkit-flex;

  display: flex;

  -webkit-align-items: center;

  align-items: center;

  -webkit-justify-content: center;

  justify-content: center;

}

</style>

 

<div id="hz">홈짱닷컴 Homzzang.com</div>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 임규호 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2023-02-13 (월) 19:59 1년전
정리가 잘되어 있어 보기 편하고 좋습니다
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2023-02-14 (화) 06:20 1년전
[@임규호] 칭찬 감사합니다. 힘이 나네요. ㅎ
주소
분류 제목
column CSS - column-span 속성 - 컬럼 병합 여부 지정 (= 컬럼병합 = 컬럼확장 = column-s…
column CSS - column-width 속성 - 컬럼 너비 지정 (= column-width속성 = 컬럼위드스속성…
column CSS - columns 속성 - (컬럼최소너비/컬럼개수) 일괄 지정 (= columns속성 = 컬럼즈속성)
box CSS - box-sizing 속성 ★★ - 너비결정방식 (= 길이결정방식 = box-sizing속성 = 박…
flex CSS - FlexBox (플렉스박스) 소개 ★★★ - 새로운 반응형 레이아웃 모델 ※ (가로/세로) (기본…
flex CSS - flex-direction 속성(C) ★★ - 기본축 방향 결정. (= flex-direction…
flex CSS - justify-content 속성(C) ★★★ - 기본축에서 아이템 정렬. (= justify-…
flex CSS - align-items 속성(C) ★★★ - 교차축에서 아이템 정렬. (= align-items속성… 2
flex CSS - flex-wrap 속성(C) ★ - 아이템 줄바꿈 가능 여부. (= flex-wrap속성 = 플렉…
flex CSS - align-content 속성(C) ★★ - 줄바꿈 된 경우, 교차축 기준으로 라인 정렬. (= …
flex CSS - flex-flow 속성(C) ☆ - (flex-direction / flex-wrap) 속성 일괄…
flex CSS - order 속성(I) - 아이템 순서 재조정 (= order속성 = 오더속성, IE11) ※ 플렉…
flex CSS - align-self 속성(I) ★ - 교차축 기준으로, 아이템 자체 정렬. (= align-sel…
responsive CSS - @media 구문 - 미디어쿼리 이용한 반응형 스타일 구현 (= media쿼리) ※ IE/Edge…
responsive CSS - RES Intro - (반응형 웹디자인 소개)
responsive CSS - Viewport ★ - 사용자에게 보이는 웹페이지 영역 (= 메타태그 뷰포트 ※ 반응형 필수조건 …
responsive CSS - RES Grid-View - (그리드뷰 = 화면너비분할 = 화면분할 = 수동그리드)
responsive CSS - Responsive Image - (반응형 이미지) ★★★
responsive CSS - RES Video - (반응형 동영상)
responsive CSS - RES Frameworks - (반응형 프레임워크) - 반응형홈페이지틀
11/25
목록
찾아주셔서 감사합니다. Since 2012