목차
FlexBox 예제 3개 - 유연한 반응형 레이아웃 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 이해에 필요한 기본 개념.
container (컨테이너) : 상자・박스
item (아이템) : 상자 안의 각 요소.
main axis : 기본축 (= 중심축 = 주축)
cross axis : 교차축 (= 반대축)
1.
float나 position 속성 사용 않고도 손쉽게 반응형 레이아웃 구현 가능.BS4 : 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) : 아이템의 (가로/세로)・(순차/역순) 방향 결정.
flex-wrap 속성(C) : 아이템 줄바꿈 여부 결정.
flex-flow 속성(C) : flex-direction, flex-wrap 속성을 한번에 선언.
justify-content 속성(C) : main axis (중심축) 기준으로 아이템 배치 정렬.
align-items 속성(C) : cross axis (반대축) 기준으로 아이템 배치 정렬.
align-content 속성(C) : flex-warp 속성에 의해 줄바꿈 된 경우, cross axis (교차축) 기준으로 라인 정렬.
[I tem 용 플렉스 속성] - '속성(I)'로 표시.
order 속성(I) : 아이템 순서 재조정.flex-basis 속성(I) : 아이템 초기 너비.
flex-grow 속성(I) : 컨테이너가 커질 때, 아이템 너비 상대적 증가율 지정.
flex-shrink 속성(I) : 컨테이너가 작아질 때, 아이템 너비 상대적 감소율 지정.
flex 속성(I) : flex-grow, flex-shrink, flex-basis 속성 일괄 정의 단축 속성.
align-self 속성(I) : 아이템 자체 정렬.
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
※ flexbox 코딩 게임 ★
https://flexboxfroggy.com/#ko
최신댓글