목차
FlexBox 예제 3개 - 유연한 반응형 레이아웃 FlexBox 소개/기본용어 ★★★ FlexBox 속성 종류 ★★★ FlexBox 가로/세로 중앙정렬 ★ FlexBox 관련 주소
[참고]
※ flexbox (= flexible blox) : 유연한 상자 모델.
※ 맨 아래 (엘리, 1분코딩) 님의 강의 본 후, 공부.
FlexBox 예제 3개 - 유연한 반응형 레이아웃
[예제1] - <div> 요소 반응형 레이이웃
<style>
.hz {
display: flex;
flex-wrap : nowrap;
background: #3e5ef5;
}
.hz > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
<div class="hz">
<div>홈</div>
<div>짱</div>
<div>닷</div>
<div>컴</div>
</div>
결과보기
[예제2] - <button> 요소 반응형 레이아웃
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family: 'Roboto';
color: #2c3e50;
text-align: center;
}
#quote {
font-size: 20px;
}
.container {
display: flex;
justify-content : space-around;
flex-wrap: wrap;
}
button {
margin-top: 20px;
background: red;
border: none;
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 40px;
background: #fff;
border: 2px solid #1abc9c;
color: #1abc9c;
letter-spacing: 1px;
text-shadow: 0;
font-size: 12px;
font-weight: bold;
cursor: pointer;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
font-family: 'Roboto', sans-serif;
}
button:hover {
color: white;
background: #1abc9c;
}
</style>
<section class="container">
<button id="a">HTML</button>
<button id="b">CSS</button>
<button id="c">JS</button>
<button id="d">Homzzang.com</button>
</section>
결과보기
[예제3] - <div> 요소 반응형 레이아웃
<style>
.flexbox {
display: flex;
}
.column {
padding: 10px;
height: 300px;
background: silver;
border: 1px solid grey;
}
.column.aside {
flex: 1;
}
.column.main {
flex: 2;
}
</style>
<article class="flexbox">
<div class="column main">Main</div>
<div class="column aside">Aside</div>
</article>
결과보기
FlexBox 소개/기본용어 ★★★
※ flex : (준비운동으로) 몸을 풀다. / 신축적인 전선
※ flexbox 이해에 필요한 기본 개념.
1. 요소 종류
container (컨테이너) : 상자(=박스) item (아이템) : 상자 안의 각 요소.
2. 정렬축 종류
main axis : 기본축 (= 중심축 = 주축 = 아이템 나열 기본 방향) cross axis : 교차축 (= 반대축 = 횡축 = 아이템 나열 측면 방향)
1.
float나 position 속성 사용 않고도 손쉽게 반응형 레이아웃 구현 가능.
BS4, BS5 : flex 기반 Grid BS3 : float 기반 Grid
Flexbox 이전엔 존재했던 4가지 모드
Block - 단락 용
Inline - 글자 용
Table - 2차원 데이터 용
Position - 요소의 명백한 위치 지정
지원 .
※ IE는 -ms- 접두어 붙여야 함.
FlexBox 속성 종류 ★★★
[C ontainer 용 플렉스 속성] - '속성(C)'로 표시
display 속성(C) : 플렉스 사용 여부. (예) selector {display:flex }flex-direction 속성(C) : 아이템 (가로/세로)・(순차/역순) 기본 방향. (초기값: row)flex-wrap 속성(C) : 아이템 줄바꿈 여부. (기본값: nowrap)flex-flow 속성(C) : (flex-direction / flex-wrap) 속성 일괄 지정.justify-content 속성(C) : 기본축 기준해, 아이템 정렬. (기본값: normal)align-items 속성(C) : 교차축 내 아이템 정렬/크기. (기본값: normal)align-content 속성(C) : 교차축 기준해, 아이템 정렬. (※ flex-warp 속성에 의해 줄바꿈 허용된 경우 사용.) (기본값: normal)
[I tem 용 플렉스 속성] - '속성(I)'로 표시.
order 속성(I) : 아이템 순서 재조정. (기본값: 0)flex-grow 속성(I) : 컨테이너가 커질 때, 아이템 너비 상대적 증가율 지정. (기본값: 0)flex-shrink 속성(I) : 컨테이너가 작아질 때, 아이템 너비 상대적 감소율 지정. (기본값: 1)flex-basis 속성(I) : 아이템 초기 너비. (기본값: auto)flex 속성(I) : flex-grow, flex-shrink, flex-basis 속성 일괄 정의 단축 속성.align-self 속성(I) : 개별 아이템 별도 정렬. (기본값: auto)
PS. flexbox 시스템에서 무시되는 속성
FlexBox 가로/세로 중앙정렬 ★
<style>
.hz {
width:300px;
height:200px;
margin:0 auto; /* 박스 자체 가로 중앙 */
background-color:yellow;
display :flex; /* flex 이용해 정렬 선언 */
justify-content :center; /* 박스 안 기본축 중앙 (보통, 가로축) */
align-items :center; /* 박스 안 교차축 중앙 (보통, 세로축) */
}
</style>
<div class="hz">홈짱닷컴 Homzzang.com</div>
결과보기
PS. flex 모델 (가로/세로) 상중하 조절
기본축 (보통, 가로)
justify-content : flex-start ; /* 좌측 */ justify-content : center ; /* 중앙 */ justify-content : flex-end ; /* 우측 */
교차축 (보통, 세로)
align-items : flex-start ; /* 상단 */ align-items : center ; /* 중단 */ align-items : flex-end ; /* 하단 */
FlexBox 관련 주소
※ 엘리 님 flex 강의 ★
https://youtu.be/7neASrWEFEM
※ 1분 코딩 님 flex 강의
https://www.youtube.com/watch?v=eprXmC_j9A4
※ 모질라 flex 강의
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
※ flex 가이드 (※ 이미지로 설명) ★
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
※ flexbox 코딩 게임 ★
https://flexboxfroggy.com/#ko
