[flex] CSS - Flexible Box (플렉스 박스) ★★★ ※ 새로운 반응형 CSS 레이아웃.

※ flexbox (= flexible blox) : 유연한 상자 모델. (※ 속성명 아님, 개념 설명 위해 임으로 명명)

※ 맨 아래 (엘리 님, 1분코딩 님) 강의 영상 듣고 난 후, 보시는 걸 권장.

flexbox 예제1

 

<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>

 

결과보기

flexbox 예제2

 

<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>

 

결과보기

FlexBox 소개

※ flexible : 신축적인, 유연한, 융통성있는.

※ flexbox (= flexible box : 신축적인 상자). CSS3 용어
※ flex : (준비운동으로) 몸을 풀다. / 신축적인 전선

 

※ flexbox 이해에 필요한 기본 개념.

container (컨테이너) : 상자・박스

item (아이템) : 상자 안의 각 요소.

main axis : 기본축 (= 중심축 = 주축)

cross axis : 교차축 (= 반대축)

 

---

 

1.

float나 position 속성 사용 않고도 손쉽게 반응형 레이아웃 구현 가능.
BS4 : flex 기반 Grid.  

BS3 : float 기반 Grid

2.

Flexbox 이전엔 존재했던 4가지 모드.

 

Block - 단락 용

Inline - 글자 용

Table - 2차원 데이터 용

Position - 요소의 명백한 위치 지정

3.
IE11 이상 최신 주요브라우저 지원

 

flexbox 속성 종류

[Container 용 플렉스 속성] - '속성(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 (교차축) 기준으로 라인 정렬.

 

---

[Item 용 플렉스 속성] - '속성(I)'로 표시.

 

order 속성(I) : 아이템 순서 재조정.
flex-basis 속성(I) : 아이템 초기 너비.

flex-grow 속성(I) : 컨테이너가 커질 때, 아이템 너비 상대적 증가율 지정.

flex-shrink 속성(I) : 컨테이너가 작아질 때, 아이템 너비 상대적 감소율 지정.

flex 속성(I) : flex-grow, flex-shrink, flex-basis 속성 일괄 정의 단축 속성.

align-self 속성(I) : 아이템 자체 정렬.

 

flexbox 예제

 

<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>

 

결과보기 

PS. 더 깊이 있게 공부하고 싶은 분께 추천.

 

※ 엘리 님 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