22.12 2
오랜만에 시작하는 수업!!
오늘 배운 flex 너란놈.. 잘 써먹어봐야지!!!
오늘의 수업
flex
1) 정렬 순서
(상단왼쪽정렬, 상단오른쪽정렬(역순), 하단왼쪽정렬, 하단 오른쪽정렬(역순), 자동으로 줄넘김(0,X) )
2) 배치하는 위치
(x축 , y축)
3) flex를 이용해서 5x5 바둑판 모양 만들어보기
같은 크기의 색상 다른 4개 박스 dispaly:flex 했을 때,
display: flex;- flex-direction: row;(기본값)
*사전적의미 row:행(가로) ..행거로 행가로 외우면될듯
-display: flex 같은 모양으로 나옴 변화없음
flex-direction: row;1.1. 기준선 왼쪽정렬를 --> 오른쪽정렬로 바꾸기 위해선
*사전적 의미 reverse : 뒤집다 .. 서로 위치를 바꾼다라고 외우면 될듯..
flex-direction: row-reverse;
- 세로 정렬를 했을 때,
왼쪽 위에 상단에서 세로 정렬로 내려옴.
사전적의미 column :열(세로) ..열쇠로 열세로 외우면될듯
flex-diection: column;2.1. 왼쪽 하단에서 세로 정렬
flex-direction: column-reverse;- 줄바뀜을 하지 않을 때,
넓이를 줄여보면
줄바뀜이 되지 않는다.
flex-wrap: nowrap;- 줄바뀜을 하고 싶을 때,
flex-wrap: wrap;- 줄바뀜하면서 역순으로 하고 싶을 때,
flex-wrap: wrap-reverse;- 기준선 배치하는 위치를 선정할때 Χ축, Υ축
(start(시작), center(중앙) , end(끝))
x축 : justify
y축 : align
6.1. 시작(start) 기준점 1>2>3>4 왼쪽으로 가로 정렬
justify-content : flex-start;6.2.시작(start) 기준점에서 역순으로 4>3>2>1 가로 정렬
flex-direction: row-reverse;
justify-content : flex-start;6.3. 중앙(center) 기준점으로 상단 1>2>3>4 세로 정렬
justify-content : center;
6.4 끝(end) 기준점으로 상단 1>2>3>4 세로 정렬
justify-content : flex-end;
6.5 중앙(center)기준점 왼쪽 세로 정렬
justify-content: flex-start ;
align-items: center;6.6 중앙(center)기준점 중앙 세로 정렬
justify-content: center ;
align-items: center;6.7. 중앙(center)기준점 끝 세로 정렬
justify-content: flex-end ;
align-items: center;6.8.끝(end) 기준점 상단 세로 정렬
justify-content : flex-start;
align-items: flex-end;
6.9. 끝(end) 기준점으로 중앙 세로 정렬 (그림은 생략)
justify-content: center;
align-items: center;6.10. 끝(end) 기준점으로 끝 세로 정렬 (그림은 생략)
justify-content: flex-end;
align-items: flex-end;- 시작(start) 기준점으로 상단 1>2>3>4 가로 정렬
flex-direction: column;
justify-content : flex-start;7.1. 시작기준점으로 상단 4>3>2>1 세로 정렬
flex-direction: column-reverse;
justify-content : flex-start;- 박스들마다 공간(여백)이 같은 비율로 나누고 싶을 때,
(첫번째와 끝 상자는 양쪽끝에 공간은 계산하지 않고, 분할된 박스들의 비율대로 공간이 생김)
justify-content: space-between;8.1 박스들 시작과 끝에도 여백이 필요하면서 분할된 박스들마다 공간비율이 균등하게 필요할 때 (주의: 시작의 공간보다 분할된 박스의 공간 비율 크기는 서로 다름 // 시작공간비율*2 분할된 박스들 공백의 크기임 )
justify-conetnt: space-aronund;8.2 시작점부터 끝의 공간도 여백이 일정하게 비율로 나누고 싶을 때,
justify-content : space-evenly;추가적으로 알아야 할 부분들
/align-content :flex-start (flex-wrap:wrap상태에서 해야함.) 창이 줄어들었을때 각 가지고 있는 박스들이 밀려나갈때 같이 붙어서 이동함.
/flex-grow :1 (1,2,3-> 1:2:3 여백의 비율을 나누는것 전체화면에서 빈 여백의 공간을 나눠갖는것,,<- 아직 많이 해봐야 이해할듯.. 설명으로 표현하는게 어려움..ㅠ
/flex: 1 (여백이 없이 창이 늘어나는대로 신축성있게 늘어나는것)
/flex-basis:0 ,auto (0 기본값 (auto는 빈 공간값의 비례해서))
/align-self :flex-start, center, flex-end (개별 박스들을 이동 시키고 싶을 때 (시작, 중앙, 끝)) 옮길수도 있음.
/order::숫자(1,2,3) 배치 순서를 숫자 입력값으로 바뀔 수 있는거
<주의> 실제html 바뀌진 않고 화면에 보이는부분이 바뀐것처럼 보이는것!!--
시작,중앙,끝, 세로/가로 정렬에 대해 정리는 이쯤에 마무리 하고,,
마무리는 바둑판 5X5 화이트/블랙 으로 꾸며보기!
<html>
<ul id="flex-block">
<li class="block-lien">
<div class="blocks"></div>
<div class="blocks"></div>
</li>
<li class="block-lien">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</li>
<li class="block-lien">
<div class="blocks"></div>
<div class="blocks"></div>
</li>
<li class="block-lien">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</li>
<li class="block-lien">
<div class="blocks"></div>
<div class="blocks"></div>
</li>
<style>
#flex-block {
width: 500px;
height: 500px;
.block-lien {
background-color: #fff;
display: flex;
.blocks {
background-color: #000;
width: 100px;
height: 100px;
}
&:nth-child(odd) {
justify-content: space-evenly;
}
&:nth-child(even) {
justify-content: space-between;
}
}
}
**처음에는 li 요소들을 25개를 만들어서 표현해야하나..
뭘 부터 해야하는 기준점이 생기지 않아 좌절하다가
오늘 배운 flex는 써먹어야 하고, 뭘 부터 나누어서 해야할지 순서가 필요했다.
-한줄로 쪼개서
-홀수 짝수에 검정,흰색으로 나눠야 할때
(홀수는 odd, 짝수는 even)
-그리고 양 여백 없이 박스들의 공간비율로 할 땐
justify-content: space-between,
-서로 같은 공간비율이 필요할 땐
justify-content: space-evenly;
활용해서 만든 바둑판 모양 완성!!
+다음은 세로로 활용해서 만들어봐야지~+