https://codepen.io/EONJENOG/pen/abgZoZN
텍스트요소 정렬
...
codepen.io
https://codepen.io/EONJENOG/pen/abgZowm
flex 시작
...
codepen.io
https://kimhyeji324.tistory.com/244
display: flex 미리보기
[ 레이아웃을 구성할 수 있는 속성 값 ] 개요 레이아웃을 구성하는 속성 값 중 우리가 배운 속성값은 block, inline-block 두가지가 있었습니다. block block은 한줄을 모두 차지해야하는 경우에 사용되었
kimhyeji324.tistory.com
[flex]
- 상위태그에 코드를 적용할 것인지 하위태그에 코드를 적용할 것인지가 가장 중요.
- 특정한 태그들을 한 줄에 같이 배치할 경우 그 태그들을 감싸고 있는 상위태그에 flex를 적용.
- flex를 적용한 태그를 flex-container라고 부르고 그의 자식들을 flex-item이라고 부른다.
- flex-item은 줄바꿈 되라는 명령어를 적지 않는 이상 flex-container안에 유연하게 배치된다.
ㄴflex-wrap: nowrap; 이라는 코드가 기본적으로 들어있기 때문. (반응형 코딩 구현 시 아주 상세히 설명 예정)
- flex-item은 container에 align-items가 적용되면 높이가 기본값일 때 0으로 작동된다.
- flex-item을 한꺼번에 정렬하는 css속성은 flex-container에 적용한다.
- flex-item은 게임 내에서 상점에 판매하는 item이라고 생각하고 flex-container는 그것을 다루는 사용자라고 생각하면 이해하기 편하다.
[align-items] flex-item 세로 정렬
- flex-container에 적용
- 왼쪽 정렬 → align-items: flex-start;
- 중앙 정렬 → align-items: flex-center;
- 오른쪽 정렬 → align-items: flex-end;
*flex는 생략할 수 있다. 예) align-items: start;
*start는 left로, end는 right로 변경해서 사용 가능.
*flex-item과 flex-container 높이가 같으면 정렬할 수 없기 때문에 container에 align-items속성이 적용되면 flex-item의 높이가 0으로 변경되면서 정렬된다.
[block, flex]
- 너비가 기본값일 때 100%
- 높이가 기본값일 때 0
[inline, inline-block]
- 너비가 기본값일 때 0
- 높이가 기본값일 때 0
[flex-item]
- 너비가 기본값일 때 0
- 높이가 기본값일 때 100%
https://codepen.io/EONJENOG/pen/abgZoaJ
flex-item이 기본값일 때 높이 관찰
...
codepen.io
https://codepen.io/EONJENOG/pen/LYKZPve
align-items와 flex-item 높이 0
...
codepen.io