Flex_CSS

miin·2021년 9월 7일

HTML / CSS

목록 보기

12/28

flex

display: flex
아래 내용은 flex를 쓴 부모에서 쓰기

justify-content: 가로선 상에서 정렬하는 속성

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬

flex-end: 요소들을 컨테이너의 오른쪽으로 정렬

center: 요소들을 컨테이너의 가운데로 정렬

space-between: 요소들 사이에 동일한 간격을 둔다

space-around: 요소들 주위에 동일한 간격을 둔다

align-items: 세로선 상에서 정렬하는 속성

flex-start: 요소들을 컨테이너의 꼭대기로 정렬

flex-end: 요소들을 컨테이너의 바닥으로 정렬

center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬

baseline: 요소들을 컨테이너의 시작 위치에 정렬

stretch: 요소들을 컨테이너에 맞도록 늘림

align-self: align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됨

flex-start: 요소들을 컨테이너의 꼭대기로 정렬

flex-end: 요소들을 컨테이너의 바닥으로 정렬

center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬

baseline: 요소들을 컨테이너의 시작 위치에 정렬

stretch: 요소들을 컨테이너에 맞도록 늘림

flex-direction: 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정하는 속성

row: 요소들을 텍스트의 방향과 동일하게 정렬

row-reverse: 요소들을 텍스트의 반대 방향으로 정렬

column: 요소들을 위에서 아래로 정렬

column-reverse: 요소들을 아래에서 위로 정렬

order: 기본값은 0 이면, 양수나 음수로 바꿀수 있다

order: 1 -1

순서를 역으로 바꿀 수 있음

flex-wrap : 정렬

nowrap: 모든 요소들을 한 줄에 정렬

wrap: 요소들을 여러 줄에 걸쳐 정렬

wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

flex-flow :flex-direction와 flex-wrap를 대신할 수 있다

flex-flow: row wrap :가로선 상의 여러줄에 정렬

align-content: 여러줄 사이의 간격 지정, 한 줄만 있는 경우에는 효과없음, 컨텐츠를 위주

flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬

flex-end: 여러 줄들을 컨테이너의 바닥에 정렬

center: 여러 줄들을 세로선 상의 가운데에 정렬

space-between: 여러 줄들 사이에 동일한 간격을 둔다

space-around: 여러 줄들 주위에 동일한 간격을 둔다

stretch: 여러 줄들을 컨테이너에 맞도록 늘림

flex: 숫자 : 숫자만큼 여백을 모두 채운다

flex로 너비를 지정하면 width값은 안먹힌다

flex-basis: flex중에서 특정 item만 너비를 주고 싶을 때 사용
.item:nth-child(2){
        flex-basis: 200px;
 }

flex-grow: item들이 남은 여백을 모두 채우고 싶을 때 사용

flex-grow:1; //전체 너비를 1/5씩 차지하게 된다
ex) 전체 너비를 꽉 채우지만 특정 item너비를 조금 더 주고 싶을 때
.item{
   flex-grow:1;
	}
.item:nth-child(2){
        flex-grow:2;
	}
item5개에 대해, 전체를 6등분으로 나누는데 2번 째 item 요소에게는 2/6 만큼을, 나머지 item 요소는 1/6 만큼의 너비를 할당하라는 의미가 된다