Today's CSS:flex
CSS 레이아웃 flex
flex를 드디어 배웠다.
일할 때 보던 jusity-content 랑 align-items 를 이제야 조금 이해할 것 같다.
부모요소와 자식요소에 맞춰 넣어야 하는 CSS 가 달랐다는 것도 오늘 처음 알았다.
솔직히 궁금하면 찾아볼 법도 했는데 이제야 찾아봄ㅎㅎ
그래도 이제야 배운 flex 유용하게 써먹어야지!
레이아웃
와이어 프레임
- 웹 페이지, 웹 어플리케이션 개발 시 레이아웃 뼈대를 그리는 단계
- 선이나 도형 등으로 인터페이스를 시각적으로 묘사
- 단순한 형태로 레이아웃과 제품의 구조를 보여주기 위해 사용
Atomic CSS 방법론
클래스 이름 선언 방법
클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법
CSS로 화면을 구분할 때는 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업 진행
수직분할은 화면을 수직으로 분할하는 것으로, 콘텐츠는 가로로 배치. 그 후 분할된 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치되도록
레이아웃 리셋
기본 스타일링을 제거하는 CSS 코드 예시
* {
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
}Flex
flexible (유연한)의 뜻
flexbox 로 레이아웃 구성된 박스를 유연하게 늘리거나 줄여 레이아웃 잡는 법
부모 요소 적용 flexbox 속성
display: flex;
부모 박스 요소에 적용해 자식 박스의 방향과 크기 결정
<!--html-->
<main>
<div>box1</div>
<div>box2</div>
<div>box3</div>
</main>/*css*/
main {
display: flex;
background-color: gray;
}
div {
border-radius: 10px;
}
flex-direction : 정렬 축
부모 요소에 작성하여 자식 요소들이 정렬할 축을 정하는 속성으로 기본적으로 가로 정렬
속성값 : row , row-reverse , column , column-reverse
main {
display: flex;
**flex-direction: row;**
}
flex-wrap : 줄 바꿈
하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈 할 것인지 정하는 속성
설정하지 않으면 줄바꿈 하지 않음
속성값 : nowrap(기본값) , warp , wrap-reverse
main {
display: flex;
**flex-wrap: nowrap;**
} /*줄바꿈 하지 않으면 아래 예시 이미지처럼 상위 요소를 넘어갈 수 있음*/
justify-content : 축 수평 방향 정렬
자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정하는 속성
가로 정렬이면 가로 방향으로 어떻게 정렬할지, 세로 정렬이면 세로 방향으로 어떻게 정렬할지
속성값 : flex-start , flex-end , center , space-between , space-around
main {
display: flex;
**justify-content: space-between;**
} /*줄바꿈 하지 않으면 아래 예시 이미지처럼 상위 요소를 넘어갈 수 있음*/
align-items : 축 수직 방향 정렬
자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정하는 속성
가로 정렬이면 세로 방향으로 어떻게 정렬할지, 세로 정렬이면 가로 방향으로 어떻게 정렬할지
속성값 : flex-start , flex-end , center , stretch , baseline
main {
display: flex;
**justify-content: space-between;**
} /*줄바꿈 하지 않으면 아래 예시 이미지처럼 상위 요소를 넘어갈 수 있음*/
align-content 공부해보기
align-items는 한줄을 기준으로 정렬하지만, align-content는 두줄부터 사용하는데 의미 있음
그래서 align-content는 두줄의 flex-wrap:wrap 인 상태에서 사용해야 함
만약 no-wrap 이면 라인이 넘어가지 않아 계속 한줄인 상태이기 때문에
align-content 사용해도 적용x
align-items는 수직축의 라인을 기준으로 아이템들이 정렬
align-content는 수직축의 라인을 기준으로 (두 줄 이상 일 때만) 라인 자체가 정렬
참고링크-00
참고링크-01
참고링크-02
자식 요소 적용 flexbox 속성
자식 요소에게 적용해야 하는 속성인 flex 는 요소가 차지하는 공간
flex 속성값
flex 속성에는 세가지 값을 지정해 줄 수 있음
자식 요소에 flex 속성을 따로 설정해주지 않으면 기본값이 적용
왼쪽에서 부터 오른쪽으로 콘텐츠 크기만큼 배치
flex: grow(팽창 지수), shrink(수축 지수), basis(기본크기)
비율로 레이아웃 지정할 경우
flex-grow 또는 flex: grow 1 auto 와 같이 grow 속성에 변화 주는 방식 권장
/* 기본값 */
flex: 0 1 auto;
/*각 값을 따로 지정해줄 수 있음*/
flex-grow: 0;
flex-ghrink: 1;
flex-basis: auto;grow
- 자식 박스는 얼마나 늘어날 수 있을까
- 기본값인 0은 빈공간이 있어도 늘어나지 않음을 의미
- 정렬축 방향으로 빈공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율 정하는 것
- 자식요소 grow 값 / 자식요소 grow 값의 총합 의 비율로 빈 공간을 가져감
- 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지
shrink
- 자식 박스는 얼마나 줄어들 수 있을까
- grow 와 함께 사용 추천하지 않음
- 설정한 비율만큼 박스 크기 작아짐
- flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방
basis
- 이 박스의 기본 크기는 얼마일까
- flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기
- flex-grow 속성값이 0인 경우에만 flex-basis 속성값 유지됨
ex) grow 는 0 : 1 : 1로 설정하고, 첫번째 박스에 flex-basis: 50px 설정하면
-> 화면 비율이 달라져도 첫번째 박스는 50px 로 고정되고 2,3번째 박스는 비율에 맞게 계속 조절 - 참고링크
궁금증 🧐❓
flex-basis: auto; 와 flex-basis:0; 의 차이는?
실제 1:1:1 너비를 가지는건 어떤걸까?
flex-basis : auto; 는 콘텐츠를 제외한 공간의 비율을 1:1:1 로 맞추고
flex-basis : 0; 는 박스의 비율을 1:1:1로 맞춘 느낌
flex-basis auto, 0 참고링크
