가로나 세로로 요소들을 정렬하기 위해 사용
바깥에 아이템들을 감싸고 있는 container가 존재 (부모자식관계가 성립해야함)
flex container : 가장 바깥쪽 아이템을 감싸고 있는 부모 영역
flex item 내부 정렬을 위한 아이템들
main axis 주축 (축에서 메인이 되는 축, 기본값일때 가로가 되는 축)
cross axis 교차축 (기본값일때 세로가 되는 축) ,
---> 축방향은 바뀔 수 있음.
container - display
display-outside 제일바깥쪽 있는 것들 inlinen, block
display- inside 요소 내부의 아이템
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 속성의 단축 속성
.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;
}
item- flex-grow
flex-item 요소가 flex container 요소 내부에서 할당 가능한 공간의 정도를 선언
음수값은 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;
}
.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
부모요소가 flex 를 갖고 있으면 shrink는 초값:1 로 기본적으로 가지고 있음
음수는 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;
}
여백의 범위가 같음 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: 100px;
}
flex-basis를 100px로 맞추고 그 나머지 영역을 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;
}
.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이 됨
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;
}
단순히 왼쪽정렬, 오른쪽 정렬이 아닌 끝나는 위치에 대해 정렬상태인지 알수 있음!
.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;
}
container-align-items
align - 교차축에 관한 것들
align-item: stretch (밑으로 쭉), flex-start (교차축의 시작부분), flex-end(교차축의 끝부분), center
justify는 한줄을 어떻게 배치할지,
align items는 한줄 자체를 어디다 배치할지 (교차축에서 ) - 그렇기 때문에 around 나 between은 없음
container-align-content
여러개의 아이템에 관한 것들
content 여러줄, 여러개의 아이템
<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;
}
container-align-self
item에 사용
<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-contents: 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-end;
}
