“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
사이트의 레이아웃을 구성할 때 기본적으로 수직 구조로 이루어져있습니다.
레이아웃을 구성 할때 기본적으로 블록 구조를 사용하게 되는데 이러한 구조들은 수직으로 쌓이는 특성이기 때문입니다.
하지만 실제로 사용하기는 수평으로 사용하는 경우가 필요한 경우도 많습니다.
수평으로 만드는 속성은 많지만 가장 많이 사용되는 속성도 알맛게 사용되는 경우도 다르기 때문에 적절하고 자신이 생각하기에 편한 속성을 사용하는 것이 좋습니다. 저번에는 float에 관해 설명했다면 이번에는 flex에 관해 설명하고자 합니다.
float와 grid에 대해 궁금하시다면?? ⬇️⬇️⬇️⬇️⬇️
레이아웃 : float에 대해 알아봅시다!
블록구조의 태그들은 기본적으로 세로로 배치가 되지만 float를 이용하여 가로로 배치할 수있습니다. 레이아웃을 완성할때 필수적인 속성으로 지정하고 해제하는 방법도 있습니다. 1. float float는
jo0132.tistory.com
레이아웃03 : grid에 대해 알아봅시다!
grid는 flex와 float와 다르게 테이블을 만들듯이 사용하는 속성입니다. 세로 열과 가로 행을 기준을 요소를 정렬 할 수잇스빈다. 하지만 테이블과 달리 css그리드는 다양 한 레이아웃을 훨씬 더 쉽
jo0132.tistory.com
flex란?
요소들이 포함된 큰 박스에 flex를 선언하고, 안에 잇는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡느느 것입니다.
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
위의 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언하는 것입니다.
flex의 속성 구조
flex는 속성으로 세가지 속성을 한번에 선언 할 수 있습니다.
구조 : flex : a b c
| flex : 1 0 100px | 1 : flex-grow(생략 불가능) | 0 : (기본값) |
| 1 : 항목드이 모두 1이면 같은 크기 | ||
| 양수 : 값이 높게 줄수록 더 늘어남 공간이 부족할때는 어떤 값도 의미없음. | ||
| 1 : flex-shrink(생략 가능) | 공간이 부족해도 항목의 크기를 줄일 수 없음 | |
| (기본값) - 자식 요소들이 많아서 컨테이너를 넘치면 안 넘치게 알아서 좁아짐 | ||
| 값을 높게 줄수록 더 좁아짐.공간이 남을때는 어떤 값도 무의미 | ||
| 100px : flex-basis(생략 가능) | auto : (기본값) | |
| 50px,100px,... : 원하는 가로 크기를 부여함 |
flex의 속성들
flex-direction
자식 요소를 나열하는 방향을 지정하는 속성입니다. 부모 요소에게 지정합니다.
| 속성값 | 속성 설명 |
| column | 위에서 아래로 나열 |
| column-reverse | 아래에서 위로 나열 |
| row | 죄측에서 우측으로 나열 |
| row-reverse | 우측에서 좌측으로 나열 |
justify-content
공간이 남을때, 즉 flex-grow : 0;일 때 자식 요소들을 가로 정렬하는 속성입니다.
| 속성값 | 속성 설명 |
| flex-start(기본값) | 시작 쪽으로 정렬(보통은 왼쪽, flex-direction : row-reverse일 때는 오른쪽) |
| flex-end | 끝 쪽으로 정렬(보통은 오른쪽, flex-direction : row-reverse일 때는 왼쪽) |
| center | 중앙으로 정렬 |
| space-between | 양쪽 정렬 |
| space-around | 요소 좌우 동일 간격 |
flex-wrap
flex자식 요소들의 줄바꿈 방식을 지정하는 속성입니다.
| 속성값 | 속성 설명 |
| wrap | 자식요소등이 많으면 다음 줄로 넘침 |
| nowrap | 자식 요소들이 많아도 한줄 안에 배치됨 |
| wrap-reverse | 자식 요소들이 많으면 다음 위 줄로 넘침 |
flex-flow
flex-direction과 flex-wrap을 나란히 붙여 하나의 속성처럶 쓸 수 있습니다.
align-items
자식요소들을 세로 정렬하는 속성입니다.
| 속성값 | 속성 설명 |
| flex-start | 시작쪽으로 정렬(보통 위쪽, flex-direction : column-reverse일 때는 아래쪽) |
| flex-end | 끝쪽으로 정렬(보통 아래쪽, flex-direction : column-reverse일 때는 위쪽) |
| center | 세로 중앙 정렬 |
| baseline | 글자의 baseline 기준으로 정렬 |
| stretch(기본값) | 부모 요소의 세로 크기를 따라 확장됨 |
order
자식 요소들의 순서를 바꿔주는 속성입니다. 배치 순서를 지정합니다.
| 속성값 | 속성 설명 |
| 0(기본값) | 순서를 바꾸지 않음 |
| 양수 | 원하는 순서를 지정 |
| 음수 | 좌측으로 자리를 바꾸는 횟수 |
align-self
자시고요소중 선택된 항목에 대해서 만 세로로 다시 정렬하는 속성입니다.
align-content
flex-wrap : wrap;일 경우 여러줄을 세로로 정렬하는 속성입니다. align-items의 속성값과 동일합니다.