• 회원가입
  • 로그인
  • 구글아이디로 로그인

[flex] CSS - FlexBox (플렉스박스) 소개 ★★★ - 새로운 반응형 레이아웃 모델 ※ (가로/세로) (기본축/교차축) (중앙정렬/가운데정렬)

목차

  1. FlexBox 예제 3개 - 유연한 반응형 레이아웃
  2. FlexBox 소개/기본용어 ★★★
  3. FlexBox 속성 종류 ★★★
  4. FlexBox 가로/세로 중앙정렬 ★
  5. FlexBox 관련 주소

 

[참고]

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

※ 맨 아래 (엘리, 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 소개/기본용어 ★★★


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

※ flex : (준비운동으로) 몸을 풀다. / 신축적인 전선 

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

 

1. 요소 종류

  • container (컨테이너) : 상자(=박스)
  • item (아이템) : 상자 안의 각 요소.

 

2. 정렬축 종류 

  • main axis : 기본축 (= 중심축 = 주축 = 아이템 나열 기본 방향)
  • cross axis : 교차축 (= 반대축 = 횡축 = 아이템 나열 측면 방향)

 


 

1.

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

  • BS4, BS5 : flex 기반 Grid
  • BS3 : float 기반 Grid


2.

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

  • Block - 단락 용
  • Inline - 글자 용
  • Table - 2차원 데이터 용
  • Position - 요소의 명백한 위치 지정


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

※ IE는 -ms- 접두어 붙여야 함.

 

 

FlexBox 속성 종류 ★★★

[Container 용 플렉스 속성] - '속성(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)

 


[Item 용 플렉스 속성] - '속성(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 시스템에서 무시되는 속성

 

  • justify-items 속성 - 인라인축 기준 아이템 수준 모든 아이템 정렬
  • justify-self 속성 - 인라인축 기준 아이템 수준 개별 정렬 정렬

 

 

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
column CSS - column-span 속성 - 컬럼 병합 여부 지정 (= 컬럼병합 = 컬럼확장 = column-s…
column CSS - column-width 속성 - 컬럼 너비 지정 (= column-width속성 = 컬럼위드스속성…
column CSS - columns 속성 - (컬럼최소너비/컬럼개수) 일괄 지정 (= columns속성 = 컬럼즈속성)
box CSS - box-sizing 속성 ★★ - 너비결정방식 (= 길이결정방식 = box-sizing속성 = 박…
flex CSS - FlexBox (플렉스박스) 소개 ★★★ - 새로운 반응형 레이아웃 모델 ※ (가로/세로) (기본…
flex CSS - flex-direction 속성(C) ★★ - 기본축 방향 결정. (= flex-direction…
flex CSS - justify-content 속성(C) ★★★ - 기본축에서 아이템 정렬. (= justify-…
flex CSS - align-items 속성(C) ★★★ - 교차축에서 아이템 정렬. (= align-items속성… 2
flex CSS - flex-wrap 속성(C) ★ - 아이템 줄바꿈 가능 여부. (= flex-wrap속성 = 플렉…
flex CSS - align-content 속성(C) ★★ - 줄바꿈 된 경우, 교차축 기준으로 라인 정렬. (= …
flex CSS - flex-flow 속성(C) ☆ - (flex-direction / flex-wrap) 속성 일괄…
flex CSS - order 속성(I) - 아이템 순서 재조정 (= order속성 = 오더속성, IE11) ※ 플렉…
flex CSS - align-self 속성(I) ★ - 교차축 기준으로, 아이템 자체 정렬. (= align-sel…
responsive CSS - @media 구문 - 미디어쿼리 이용한 반응형 스타일 구현 (= media쿼리) ※ IE/Edge…
responsive CSS - RES Intro - (반응형 웹디자인 소개)
responsive CSS - Viewport ★ - 사용자에게 보이는 웹페이지 영역 (= 메타태그 뷰포트 ※ 반응형 필수조건 …
responsive CSS - RES Grid-View - (그리드뷰 = 화면너비분할 = 화면분할 = 수동그리드)
responsive CSS - Responsive Image - (반응형 이미지) ★★★
responsive CSS - RES Video - (반응형 동영상)
responsive CSS - RES Frameworks - (반응형 프레임워크) - 반응형홈페이지틀
11/25
목록
찾아주셔서 감사합니다. Since 2012