가로나 세로로 요소들을 정렬하기 위해 사용
바깥에 아이템들을 감싸고 있는 container가 존재 (부모자식관계가 성립해야함)
flex container : 가장 바깥쪽 아이템을 감싸고 있는 부모 영역
flex item 내부 정렬을 위한 아이템들
main axis 주축 (축에서 메인이 되는 축, 기본값일때 가로가 되는 축)
cross axis 교차축 (기본값일때 세로가 되는 축) ,
---> 축방향은 바뀔 수 있음.
<container에서 사용하는건지 item에 사용하는건지 구분하기>
container - display
display-outside 바깥쪽 있는 것들 inline, block
display- inside 요소 내부의 아이템 - flex, grid
display: inline-flex => 바깥쪽에 있는것들은 inline으로, 안쪽에있는 item들은 flex로 함
container - flex- direction
플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축(main axis, cross axis) 및 방향(정방향, 역방향)을 지정
기본값: row (왼쪽에서 오른쪽 )
row- reverse (오른쪽에서 왼쪽)
column 컨테이너의 주축이 블록축과 동일(위에서 아래)
column- reverse (아래에서 위)
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
flex-direction: row;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
기본값
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
flex-direction: column-reverse;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
collumn-reverse
container- flex-wrap
container에 사용
창을 줄이면 내가 with값을 설정 했음에도 불구하고 유연적으로 움직임, 그걸 방지 하기 위해 사용 (자신의 크기를 온전히 랩핑한다!)
flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현할 것인지 결정하는 속성
nowrap : 기본 설정값, flex-item 요소들을 한줄에ㅐ 배치함. 시작점은 flex-direction
wrap: flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐 배치 배치되는 시작점은 flex-direction
wrap-reverse : 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
flwx-wrap: wrap-reverse
flex- flow (short hand)
flex-direction, flex-wrap 속성의 단축 속성
flex flow: row, colmn / nowrap, wrap, wrap-reverse
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
flex-flow: column wrap-reverse;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
flex-flow: column wrap-reverse
item - order
플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정
order를 하고 싶다면 그 부모에게 flex나 그리드 설정이 되어야만 함
순서는 오름차순 order 값이고 같은 값일 경우 소스 코드의 순서대로 정렬
화면에 나타나는 눈에 보이는 것들에만 적용
정수 사용, 기본값: 0
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
.item:nth-child(3) {
order: -1;
}
.item:nth-child(2) {
order: 4;
}
order를 사용하고싶으면 부모 요소에 display:flex 설정이 되어있어야함
item- flex-grow
flex-item 요소가 flex container 요소 내부에서 할당 가능한 공간의 정도를 선언
기본값:0
음수값은 x
flex-item 요소들이 동일한 flex-grow 값을 갖는다면 flex-container 내부에서 동일한 공간을 할당받음
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
flex-grow: 1;
}
flex-grow:1 모든 item이 할당가능공간을 1:1:1로 나눠가짐, 화면을 늘리거나 줄일때도 마찬가지
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
}
.item {
width: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
.item:nth-child(2){
flex-grow: 2;
}
.item:nth-child(3){
flex-grow: 1;
}
늘리면 늘릴수록 할당 가능 범위가 넓어져 넓어짐
item- flex- shrink
grow와 반대 / grow는 늘릴수록 할당가능 영역을 분배하여 커짐/ shrink는 줄어들면서 줄어든 영역들을 나눔
부모요소가 flex 를 갖고 있으면 shrink는 초기값:1 로 기본적으로 가지고 있음
flex-item 요소의 크기가 flex-container 요소의 크기보다 클때 flex-shrink 속성을 사용
flex-shrink:0 일경우 절때로 줄어들지 않겠다! 값이 클수록 많이 줄어듦
음수는 x
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
}
.item {
width: 200px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
.item:nth-child(1) {
flex-shrink: 0;
}
.item:nth-child(3){
flex-shrink: 2;
}
1,2,3 번은 같은 200px, 화면이 줄어들게 되면
1은 자기의 값 그대로 유지(shrink 값이 0) , 3이 제일 많이 줄어들고(shirink값이 2) 2는 설정하지 않았지만 1의 값을 가지고 있기 때문에 3보다는 덜하지만 줄어들긴 함
item- flex-basis
플렉스 아이템의 초기 크기를 지정함.
원래의 width 값을 유지할 수 있도록 늘어나도 줄어들어도 그 값들을 제어할 수있음
<div class="item">플렉스</div>
<div class="item">!</div>
<div class="item">!</div>
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
}
.item {
width: 200px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
flex-grow: 1;
}
grow는 할당 가능한 여백을 나눠갖게됨.
item 안에 있는 컨텐츠가 많던 적던 신경 안씀 -> 컨텐츠와 상관없이 똑같은 양이나 할당량을 지정해주고 싶을때 basis를 사용함
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
}
.item {
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
flex-grow: 1;
flex-basis: 100px;
}
flex-basis를 100px로 맞추고(컨텐츠가 길던 적던 동일한 100px) grow를 통해 그 나머지 영역을 1:1:1로 나누게 됨.
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
}
.item {
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
flex-grow: 1;
flex-basis: 0px;
}
flex-basis가 0이기 때문에 컨텐츠 상관 없이 할당 가능한 영역을 설정할 수 있음
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
}
.item {
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
flex-basis: 0px;
}
.item:nth-child(1){
flex-grow: 5;
}
.item:nth-child(2){
flex-grow: 1;
}
.item:nth-child(3){
flex-grow: 3;
}
flex-basis를 0으로 했기 때문에 정확하게 5:1:3을 만들 수 있음.
item-flex(shorthand)
플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정
flex-grow, flex-shrink, flex-basis의 단축속성
초기값: flex-grow: 0, flex-shrink:1, flex-basis: auto
주의) 한개 또는 두개의 단위 없는 숫자를 사용할 때 flex-basis의 값은 auto가 아니라 0이 됨
flex:1 할 경우엔 basis가 자동으로 0으로 바뀌게 됨 아이템이 컨텐츠와 상관없이 적절한 비율로 나눠갖게됨.
container-justify-content
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
border: 5px dashed orange;
display: flex;
justify-content: flex-start;
}
.item {
height: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
flex-start
.container {
border: 5px dashed orange;
display: flex;
justify-content: flex-end;
}
.item {
height: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
flex-end
flex-end: flex 끝나는 위치에 정렬
.container {
border: 5px dashed orange;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.item {
height: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
단순히 왼쪽정렬, 오른쪽 정렬이 아닌 끝나는 위치에 대해 정렬상태인지 알수 있음! (flex-direction 확인필수!)
.container {
height: 500px;
border: 5px dashed orange;
display: flex;
justify-content:center;
}
.item {
height: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
justify-content: center
.container {
border: 5px dashed orange;
display: flex;
justify-content:space-between;
}
.item {
height: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
justify-content: space-between
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
border: 5px dashed orange;
margin-bottom: 20px;
display: flex;
}
.item {
height: 50px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
.container:nth-child(1){
justify-content: space-between;
}
.container:nth-child(2){
justify-content: space-around;
}
space-between은 start와 end에 딱붙어있는 상태에서 그 사이 여백을 나눠갖는것
around는 item들의 앞뒤 영역을 모두 같은 크기로 여백을 나눠 갖는것
container-align-items
align - 교차축에 관한 것들
align-item: stretch (밑으로 쭉), flex-start (교차축의 시작부분), flex-end(교차축의 끝부분), center
justify는 한줄을 어떻게 배치할지,
align items는 한줄 자체를 어디다 배치할지 (교차축에서 ) - 그렇기 때문에 around 나 between은 없음
만약 한줄이 아니라 어쩔수 없이 어려줄이 되었을경우엔
영역이 존재하여 그 영역 안에서 star, center, end를 갖게 된다.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
height: 400px;
border: 5px dashed orange;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.item {
width: 150px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue ;
font-size: 30px;
}
container-align-content
1줄자체는 aline-items / 여러줄일때 align-content
content 여러줄, 여러개의 아이템
교차축을 따라 움직이면서
align-content : flex-start / flex-end / center / space-between / space-around
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
.container {
height: 400px;
border: 5px dashed orange;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.item {
width: 150px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue;
font-size: 30px;
}
item-align-self
한개만 선택하여 위치 설정을 해줌
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
height: 400px;
border: 5px dashed orange;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.item {
width: 150px;
height: 50px;
margin: 5px;
background-color: paleturquoise;
border: 3px solid blue ;
font-size: 30px;
}
.item:nth-child(4) {
align-self: flex-start;
}
