※ 화면에 박스 위치를 (0,0)에서 시작하고 싶을 때 ※
브라우저에 따라 시작위치 다를 수 있음
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
▶ Flexbox
.example{
display: flex
}
- 부모 박스 요소에 'display: flex' 라는 속성을 적용
- 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
- 부모 요소에 속성을 지정하면 한번에 자식 요소의 속성을 넣을 수 있어 편리함
Flex 요소에 방향 지정(flex-direction)
.example
{
display: flex;
flex-direction: row;
{
- flexbox의 자식 요소들의 방향 결정
- row( 기본값 ) : 자식 박스 가로로 정렬 / column : 자식 박스 세로로 정렬
- row-reverse : row 값에 오른쪽부터 정렬 / column-reverse : column 값에 아래쪽부터 정렬
- display 속성에 flex 값은 부모 요소에 적용 (display: flex)
Flex 요소에 줄바꿈(flex-wrap)
.example {
display: flex;
flex-wrap: wrap;
}
- flexbox의 자식 요소들이 강제로 한줄에 배치되게 할 것인지, 영역 내에서 줄바꿈 할 것인지를 결정
- 속성값 : wrap(줄바꿈 허용), nowrap(줄바꾸지 않고 한줄에 배치), wrap-reverse(줄바꿈 반대로, 아래->위)
flex-flow
.example {
display: flex;
flex-flow: column wrap;
}
- flex-direction 속성과 flex-wrap 속성을 합쳐서 flex-flow 라는 속성으로 사용
- 속성값은 차례대로 direction과 wrap
Flexbox 부모 요소에 적용하는 정렬 속성
- Main Axis 와 Cross Axis
- Main Axis: flex-direction과 같은 방향 축
- Cross Axis: flex-direction의 수직축
- justify-content : 자식 요소 main axis 선상 정렬
- align-items : 자식 요소 cross axis 선상 정렬
- align-content : 자식 요소 cross axis 선상 정렬
- wrap으로 설정된 경우에만 관련있음(줄바꿈이 있을때만)
- 여러줄 있을 때 줄들 사이의 간격 지정
속성값
속성값 | 설명 |
flex-start | flex 시작 부분으로 정렬 |
flex-end | flex 끝 부분으로 정렬 |
center | item들을 중앙으로 정렬 |
space-between | item 사이의 일정하게 공간 |
space-around | item 사이와 처음, 끝 부분에도 일정하게 공간 |
flex: grow shrink basis
문법 : flex: grow(팽창 지수) shrink(수축 지수) basis(기본 크기)
기본값 : 0 1 auto
자식요소에 각각 지정 가능
grow
- 컨텐츠 크기만큼 자식박스 크기 자동으로 지정됨
- grow 값은 전체 부모 박스 내에서 해당 자식 박스의 가로(또는 세로)의 비율
- 값을 1로 지정하면 1/n , 2로 지정하면 2/n
- 자식 박스의 전체 grow 값을 같게 지정하면 동일한 비율 차지
- flex-grow 로 grow 속성만 변경 가능
shrink
설정한 비율만큼 박스가 줄어들음
grow 값과 basis 값을 지정하면 shrink 값은 계산하기 어려워지므로 grow 만 쓰는 것 추천
grow 값 지정하면 shrink 값은 지정 안하거나 1 로 지정
basis
자식 박스의 크기 최소 비율
☞ 참고) CSS 아키텍쳐
1. BEM(Block-Element-Modifier)
- CSS에서 구성요소를 블럭으로 나누어서 이름을 짓는 방법
- 블럭안엔 블럭이 포함될 수 있음.
ex) header block 안에는 Logo block, search block, navigation block 등이 들어갈 수 있음
- ‘block__element--modifier’ 형식으로 분리
ex) .header__navigation--navi-text
2. Atomic CSS
- 같은 속성을 지정해줄 요소끼리 같은 이름 지정하는 방식
ex) width 값을 70%로 지정 -> class=“w10”
height 값을 100%로 지정 -> class=“h100”
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox
↑ Flexbox 실습 페이지
'TIL(Today I Learned)' 카테고리의 다른 글
5/2 (월) Linux 기초 (0) | 2022.05.02 |
---|---|
4/29 (금) 페어 프로그래밍 회고 / 트위틀러 목업(Twittler Mockup) 만들기 (2) | 2022.04.29 |
4/27 (수) CSS 기초 (0) | 2022.04.28 |
4/27 (수) HTML 기초 (0) | 2022.04.27 |
2022.4.26 (화) 프로그래밍 기초 (0) | 2022.04.26 |