◾ flex
1. padding, margin
→ padding 을 기준으로 margin 을 나타낸다.
2. display
→ inline : width,height 프로터티 지원 x , 텍스트와 같다. 사용 시 없어짐
→ block : width,height 프로터티 지원 o 사용이 가능하다.
→ inline-block : inline 에 width, height 프로터티 지원이 가능하게함
→ flex
3. flex
→ 반드시 직속 부모에게 적용할 것
→ 사용법 : display: flex
→ div, body, section 등 어떤 태그든 flex container 로 바꿔줌
→ 안에서 요소들이 움직이는 방향을 바꾸는 프로퍼티를 기본적으로 가지고 있음 (flex-direction)
flex 레이아웃 시스템에는 main axis(주축), cross axis(교차축)
flex direction > row > 주축은 오른쪽을 가리킴 > 교차 축은 수직선을 가리킴
✔ flex-direction
→ 기본값으로 row(가로) 로 설정되어 있음
→ flexbox 에게 요소들이 어떤 방향으로 갈 지를 지시하는 역할을 함 // 방향 : 행(수평), 열(수직)
→ row(가로) , column(세로)
→ row-reverse, columm-reverse
✔ flex-wrap (반응형 모바일)
→ 기본적으로 nowrap(줄 바꿈 없음) 으로 설정됨
→ 부모에게 적용하기!
→ flex-wrap: wrap
→ flex-wrap: wrap-reverse
✔ flex-flow (반응형 모바일)
→ flex-flow: flex-direction + flex-wrap 같이 사용 가능
→ flex-flow: column wrap;
✔ gap
→ flex container 컨테이너들 서로 간격을 주도록 하는 거 (부모에게 적용해야함)
→ gap: 10px;
→ row-gap: , column-gap: 열과 행 각각 부여할 수 있음
4. justify-content (가로축)
→ main axis 에서 아이템을 정렬해줌 // 주축에서 아이템을 이동
→ space-between : 박스들 사이에 일정한 공간이 생김
→ space-around : 박스들 주위에 공간을 만들어줌
→ center : 중앙으로
→ flex-start, flex end : 왼쪽 끝 , 오른쪽 끝
5. align-items (세로축)
→ 교차축을 따라 flex item 을 정렬해줌
→ align-items: center // height 기준으로 센터 배치
→ align-items: flex-start // height 기준으로 맨 위쪽 배치
→ align-items: flex-end // height 기준으로 맨 아래 배치
→ align-items: stretch // 자식 height 가 없을 경우 세로 선 길이를 가장 크게 만듬
→ 항목들 전체를 위, 아래, 중앙으로 움직임
6. align-content (반응형 모바일)
→ 다중라인 flex 컨테이너에서 라인들의 정렬을 설정
→ align-content: space-evenly // 균일한 간격
→ 여러 개의 라인이 있을 때만 작동
◾ 자식들에 적용하는 속성 (반응형 사이트를 만들 때 유용)
1. order
→ 컨테이너 내부의 모든 자식들은 기본적으로 order 가 0이다. // 0 , 1, 2, 3, 4, 5
→ order: 1~#; // 맨뒤로 감 (기준이 0이므로)
→ order: -1~-#; // 맨앞으로 감 (기준이 0이므로)
2. align-self
→ 항목이 교차축에서 개별적으로 정렬을 선택할 수 있게 해줌
→ align-self: flex-start
→ align-self: flex-end
3. flex-grow
→ 컨테이너 자식들에게 얼마만큼의 공간을 차지할 수 있는지 말해줌
→ 너비를 설정할 필요없이 얼마나 큰 공간을 차지해야 하는지 알려주는 속성
→ flex-grow: 1;
→ flex-grow: 2;
→ 기본값은 flex-grow: 0; // 텍스트가 필요로 하는만큼만 공간을 차지함
4. flex-shrink
→ 기본값은 flex-shrink: 1;
→ 형제들에게 상대적이며 0을 제외한 다른 비율은 결코 축소되지 않음
→ 숫자가 높을수록 축소되는 속도가 빨라짐
→ flex-shrink: 0; // 지정한 너비에 도달했을 때 더이상 줄어들지 않음
5. flex-basis
→ flex 항목의 이상적인 크기인 초기 크기를 설정할 수 있음
→ grow: 1 , shrink: 0 basis 500px // min-width 같은 효과를 낼 수 있음
→ 주 축을 가짐
◾ flex: grow, shrink, basis 로 사용가능
→ flex: 1 0 500px
'CSS 마스터하기 > CSS' 카테고리의 다른 글
[CSS] Transitions(전환) 마스터하기 (0) | 2024.04.05 |
---|---|
[CSS] color(:root) 마스터하기 (0) | 2024.04.05 |
[CSS] state 마스터하기 (0) | 2024.04.05 |
[CSS] position 마스터하기 (0) | 2024.04.04 |
[CSS] grid 마스터 (0) | 2024.04.04 |