일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- react
- 자바스크립트 내장객체
- 공공데이터 활용
- 일러스트 입체글자
- 미세먼지
- 20231221
- css 속성
- 공공데이터
- 미세먼지알림사이트만들기
- jQuery
- Js 내장객체
- 자바스크립트
- CSS
- open api
- 리액트
- HTML
- css속성
- FOR문
- 제이쿼리
- Illustrator2022
- JS
- JavaScript
- useState
- 아코디언카드만들기
- module.css
- 개발일지
- position
- 퍼블리싱
- 메뉴바만들기
- 바닐라자바스크립트
- Today
- Total
김코드의 웹디자인 세상
flex item의 정렬 _ justify-content, align-content,align-items 본문
✏ justify-content
justify-content는 플렉스 아이템들의 주축이 수평일 때 정렬방법을 지정해주는 속성이며
주로 사용되는 flew-start, flex-end, center 세 가지가 있다.
1. flex-start
flex-start는 플렉스 아이템들을 시작점으로 정렬 즉 왼쪽 정렬시키는 속성이다.
기본적으로 아이템들은 왼쪽으로 정렬이 되어 있기 때문에 flex-start는 기본값으로 생각하면 된다.
2. flex-end
flex-end는 플렉스 아이템들을 끝점으로 정렬 즉 오른쪽 정렬시키는 속성이다.
주축이 변경되지 않기 때문에 순서는 바뀌지 않는다는 것을 알고 있어야 한다.
3. center
center는 플렉스 아이템들을 가운데 정렬시키는 속성이다.
✏ align-content
align-content는 플렉스 아이템들의 주축이 수직일때 여러 줄의 아이템의 정렬방법을 지정해주는 속성이며
stretch. flex-start, flex-end, center 가 주로 사용된다.
align-content를 사용하려면 조건이 있는데 꼭 아이템들이 여러 줄이어야만 작동을 한다.
1. stretch
stretch는 플렉스 아이템들을 시작점으로 정렬시키는 속성으로 기본값이다.
stretch는 늘린다는 뜻을 가진 단어이다.
만약 아이템의 크기를 width 값만 지정한 후 height값은 지정하지 않았다.
그랬더니 아이템의 크기가 늘려 저서 채워지는 것을 볼 수 있다.
그럼 이번에는 width와 height의 값을 둘 다 지정해주겠다.
그랬더니 아이템들이 크기 지정된 속성 값을 가진 후 시작되는 시작점으로 정렬되어 있는 모습을 보였다.
2. flex-start
flex-strat는 아이템들을 시작점으로 정렬 즉 위로 정렬시키는 속성으로 stretch와는 차이점이 있다.
3. flex-end
flex-end는 아이템들을 끝점으로 아래로 정렬시키는 속성이다.
마찬가지로 주축이 변경되지 않기 때문에 순서는 바뀌지 않는다는 것을 알고 있어야 한다.
4. center
center는 아이템들을 가운데로 정렬시키는 속성이다.
✏ align-items
align-items는 플렉스 아이템들의 주축이 수직일때 교차축의 한 줄의 아이템의 각각 줄마다 정렬방법을 지정해주는 속성이며 stretch. flex-start, flex-end, center 가 주로 사용된다.
1. stretch
stretch는 플렉스 아이템들을 시작점으로 정렬시키는 속성으로 기본값이다.
height 값이 지정되지 않아 auto로 임의의 값으로 지정되어 아이템들이 늘어나 있는 것을 볼 수 있었다.
2. flex-start
flex-start는 아이템들을 줄당 시작되는 시작점으로 정렬 즉 위로 정렬시키는 속성이다.
3. flex-end
flex-end는 아이템을 줄당 끝나는 끝점으로 정렬 즉 아래로 정렬시키는 속성이다.
4. center
center는 아이템을 줄당의 가운데로 정렬시키는 속성이다.
φ(^∇^ )
가끔 이렇게 정리하다 보면 읽어도 읽어도 이상한 거 같지 않지만 여러분들 눈에는 뒤죽박죽 이상하다고 보일 수 있어요...
그래도 어느 누군가에게 도움이 될 수 있다면 좋겠네요...!
오늘도 긴 글 읽어주셔서 감사합니다!
'⊹ ⠀𝙲𝚂𝚂, 𝚂𝙲𝚂𝚂' 카테고리의 다른 글
css transition 전환 속성 (0) | 2022.10.03 |
---|---|
flex item 의 순서 및 너비와 비율 속성 (0) | 2022.10.03 |
flex 속성 flex-wrap (0) | 2022.09.30 |
flex의 display와 flex-direction (0) | 2022.09.29 |
요소의 쌓임 순서 - z-index (0) | 2022.09.29 |