Flexbox 상세 정보

Flexbox 소개
In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.(W3C)
이상은 W3C가 flexbox에 대한 부분적인 해석이다. 대개 flexbox의 출현은 복잡한 웹 레이아웃을 해결하기 위한 것이다. 왜냐하면 이런 레이아웃 방식은 매우 유연하기 때문이다.용기의 하위 요소는 임의의 방향으로 배열할 수 있다.이 속성은 현재 비공식 표준에 처해 있으며, 다음은 각 브라우저가 flexbox에 대한 지원 정도이며, 비교적 새로운 브라우저에서 기본적으로 이 속성을 사용할 수 있다.
Flexbox 모델 및 용어
flex 레이아웃 모델은 블록과 내연 모델의 레이아웃과 다르다. 블록과 내연 모델의 레이아웃 계산은 블록과 내연의 흐름 방향에 의존하고 flex 레이아웃은 flex directions에 의존한다.간단하게 말하자면 Flexbox는 레이아웃 모듈이지 단순한 속성이 아니다. 부모 요소 (flex container) 와 하위 요소 (flex items) 의 속성을 포함한다.

메인 샤프트, 메인 샤프트 방향(main axis |main dimension): 사용자 에이전트가 신축 용기의 메인 샤프트를 따라 신축 항목을 설정합니다. 메인 샤프트는 메인 샤프트 방향의 연장입니다.

메인 샤프트 시작점, 메인 샤프트 끝점(main-start |main-end): 신축 항목의 설정은 용기의 메인 샤프트 시작점에서 메인 샤프트 끝점으로 끝납니다.

메인 샤프트 길이, 메인 샤프트 길이 속성(main size |main size property): 신축 항목의 메인 샤프트 방향의 너비나 높이는 프로젝트의 메인 샤프트 길이이고, 신축 항목의 메인 샤프트 길이 속성은width 또는height 속성이며, 어느 것이 메인 샤프트 방향에 따라 결정된다.

측축, 측축 방향(cross axis|cross dimension): 주축과 수직인 축을 측축이라고 하고 측축 방향의 연장이다.

측축 기점, 측축 종점(cross-start|cross-end): 항목을 채우는 신축행의 설정은 용기의 측축 기점변에서 시작하여 측축 종점변으로 끝납니다.

사이드 샤프트 길이, 사이드 샤프트 길이 속성(cross size | cross size property): 신축 항목의 사이드 샤프트 방향 너비나 높이는 항목의 사이드 샤프트 길이이며, 신축 항목의 사이드 샤프트 길이 속성은 "width"또는 "height"속성으로 어느 쪽을 향하느냐에 따라 결정된다.

Flexbox 사용 예
수평 세로 가운데
아래의 이 예는 우리가 사용하는 많은 완전 가운데(상하좌우 가운데)입니다. 우리는 여러 가지 방법으로 실현할 수 있지만 현재는 Flexbox로만 실현하는 것이 가장 간단합니다.

body{
    padding: 0;
    margin: 0;
}

.parent {
  display: flex;
  height: 300px; /* Or whatever */
  background-color: black;
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
  background-color: white;
}

Flex 컨테이너에서 항목 여백이 auto로 설정된 경우 자동 수직 여백을 설정하면 두 축이 완전히 결합됩니다.
여섯 개의 하위 요소 레이아웃
다시 한 번 예를 들면, 하위 원소의 수량을 6개로 늘린다.여섯 개의 하위 요소는 브라우저의 크기에 따라 레이아웃을 바꿉니다. 미디어로 조회할 필요가 없습니다.

    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

body{
    margin: 0;
    padding: 0;
}

ul {
    margin: 0;
    padding: 0;

}

li{
    list-style: none;
}

.flex-container {
    /* We first create a flex layout context */
    display: flex;

    /* Then we define the flow direction and if we allow the items to wrap 
    * Remember this is the same as:
    * flex-direction: row;
    * flex-wrap: wrap;
    */
    flex-flow: row wrap;
    /* Then we define how is distributed the remaining space */
    justify-content: space-around;
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;

    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

효과는 다음과 같습니다.
그림의 효과를 실현하려면 세 가지 속성을 설정해야 한다:flex-direction:row;flex-wrap: wrap; justify-content: space-around;다음 섹션에서는 각 속성에 대해 설명합니다.
등록 정보
1.display(flex container)

display: other values | flex | inline-flex;

2.flex-direction(flex container)
이것은 주로 주축을 만드는 데 사용되며, 신축 항목이 신축 용기에 놓이는 방향을 정의합니다.

flex-direction: row | row-reverse | column | column-reverse

row(기본값): "ltr"조판 방식에서 왼쪽에서 오른쪽으로 배열;"rtl"조판 방식 아래에서 오른쪽에서 왼쪽으로 배열하다.

row-reverse:row의 배열 방향과 반대로'ltr'의 조판 방식에서 오른쪽에서 왼쪽으로 배열한다."rtl"조판 방식 아래에서 왼쪽에서 오른쪽으로 배열하다.

column:row와 유사하지만 위에서 아래로 배열됩니다.

column-reverse:row-reverse와 유사하지만 아래에서 위로 배열됩니다.

3. order(flex items) 기본적으로 신축 항목은 문서 흐름에 따라 선후 순서로 배열됩니다.그러나'order'속성은 신축 항목이 신축 용기에 나타나는 순서를 제어할 수 있다.

order:     

4.flex-wrap(flex container)이란 주로 신축 용기에 한 줄로 표시되는지 여러 줄로 표시되는지 정의하는데 사용되며, 옆축의 방향은 새 줄이 쌓이는 방향을 결정한다.

flex-wrap: nowrap | wrap | wrap-reverse 

nowrap(기본값): 신축 용기 단행 디스플레이, "ltr"레이아웃에서 신축 항목은 왼쪽에서 오른쪽으로 배열;rtl 조판에 신축 항목이 오른쪽에서 왼쪽으로 배열되어 있습니다.

wrap: 신축 용기 여러 줄 표시, "ltr"조판에서 신축 항목은 왼쪽에서 오른쪽으로 배열;rtl 조판에 신축 항목이 오른쪽에서 왼쪽으로 배열되어 있습니다.

wrap-reverse: 신축 용기 여러 줄 표시, "ltr"조판에서 신축 항목은 오른쪽에서 왼쪽으로 배열;'rtl'조판 아래 신축 항목은 왼쪽에서 오른쪽으로 배열됩니다.(wrap과 반대)

5.flex-flow(flex container) 이것은 "flex-direction"과 "flex-wrap"속성의 줄임말 버전입니다.신축 용기의 주축과 측축을 동시에 정의했다.기본값은 row nowrap입니다.

flex-flow:  || 

div { flex-flow: row; }/* Initial value. Main-axis is inline, no wrap. */

div { flex-flow: row-reverse wrap-reverse; }/* Main-axis is the opposite of inline direction(right to left). New lines wrap upwards. */

6.justify-content(flex container) 이것은 신축 항목이 주축선을 따라 정렬되는 방식을 정의하는 데 사용됩니다.한 줄의 모든 신축 항목이 신축되거나 신축될 수 없지만 최대 길이에 도달했을 때, 이 속성은 여분의 공간을 분배할 수 있습니다.항목이 한 줄을 넘을 때, 이 속성도 항목의 정렬에 약간의 제어를 가한다.

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start(기본값): 신축 항목이 한 줄의 시작 위치로 정렬됩니다.

flex-end: 신축 항목이 한 줄의 끝 위치로 정렬됩니다.

center: 신축 항목이 한 줄의 중간 위치로 정렬됩니다.

space-between: 신축 항목은 줄에 고르게 분포한다.첫 번째 신축 항목은 한 줄의 첫 번째 위치이고, 마지막 신축 항목은 한 줄의 마지막 위치에 있다.

space-around: 신축 항목은 줄에 고르게 분포하고 양쪽은 절반의 공간을 보존한다.

7.align-content(flex container) 이 속성은 주로 신축 줄이 신축 용기에 있는 정렬 방식을 조정하는 데 사용된다.신축 항목이 메인 축에'justify-content'를 사용하는 것과 같다.

 align-content: flex-start | flex-end | center | space-between | space-around | stretch;

8.align-items(flex container)

align-items: flex-start | flex-end | center | baseline | stretch

flex-start: 신축 항목은 사이드 축의 시작 모서리에 있는 행의 바깥쪽 여백에서 사이드 축의 시작 모서리에 바짝 붙습니다.

flex-end: 신축 항목은 사이드 축 끝 모서리의 바깥쪽 거리에서 이 줄이 사이드 축 끝 모서리에 기대어 있습니다.

center: 신축 항목의 외곽 거리 상자는 이 줄의 옆축에 가운데로 배치됩니다.

baseline: 신축 항목은 그들의 기선에 따라 정렬됩니다.

stretch(기본값): 신축 항목의 스트레칭이 전체 신축 용기를 채웁니다.이 값은 항목의 외곽 거리 상자의 사이즈를 "min/max-width/height"속성의 제한에 따라 가능한 한 줄의 사이즈에 가깝게 합니다.

9.align-self(flex items)는 단독 신축 항목에 기본 정렬 방식을 덮어쓰는 데 사용됩니다.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

10.flex-grow(flex items)는 필요에 따라 신축 항목의 확장 능력을 정의합니다.그것은 단위가 없는 값을 비례로 받아들인다.주로 신축 용기의 남은 공간을 비례에 따라 얼마나 확장해야 하는지를 결정하는 데 쓰인다.

flex-grow: ; /* default 0 */

모든 신축 항목의 'flex-grow' 가 '1' 을 설정하면, 모든 신축 항목은 크기가 같은 남은 공간으로 설정됩니다.만약 그 중 하나의 신축 항목에'flex-grow'값을'2'로 설정한다면 이 신축 항목이 차지하는 잉여 공간은 다른 신축 항목이 차지하는 잉여 공간의 두 배이다.다음 그림은 다음과 같습니다.
11.flex-shrink(flex items)는 필요에 따라 신축 항목의 수축 능력을 정의한다.[참고: 마이너스 값도 유효합니다.]

flex-shrink: ; /* default 1 */

12.flex-basis(flex items)는 신축 기준치를 설정하고 나머지 공간은 비율에 따라 신축한다.

flex-basis:  | auto; /* default auto */

"0"으로 설정하면 나머지 공백은 고려하지 않습니다.자동으로 설정하면 flex-grow 값에 따라 남은 공백 공간을 분배합니다.그림과 같이
13.flex(flex items)는'flex-grow','flex-shrink','flex-basis'세 가지 속성의 줄임말이다.그 중에서 두 번째와 세 번째 매개 변수(flex-shrink,flex-basis)는 선택할 수 있는 매개 변수이다.기본값은 0 1 auto입니다.

flex: none | [  ? ||  ]

기타 자원

CSS Flexible Box Layout Module Level 1

A Complete Guide to Flexbox

완전한 Flexbox 가이드

Using CSS flexible boxes