[CSS3] Flexbox (display:flex, justify-conent, align-items, flex-grow, flex-basis)

 

기본

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

 

 

flex 사용

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

 

flex-direction

축의 방향

flex-direction: row 가 기본.

/* 한 줄의 글을 작성하는 방향대로 */
flex-direction: row;

/* <row>처럼, 대신 역방향 */
flex-direction: row-reverse;

/* 글 여러 줄이 쌓이는 방향대로 */
flex-direction: column;

/* <column>처럼, 대신 역방향 */
flex-direction: column-reverse;

/* 전역 값 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

 

justify-content

justify-content: flex-start;  기본값

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* 축에서 시작지점 */
justify-content: flex-end;   /* 축에서 끝지점 */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
/* justify-content does not take baseline values */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* 축을 기준으로 균일하게 정렬 */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

 

justify-content: space-between; 

 

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

 

align-items

/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
/* align-items does not take left and right values */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

 

 

Flex 속성

 

flex-grow

flex-grow만을 사용할경우 각 여백에 대한 비율로 조정되기 때문에 의도한바로 너비를 지정하기 어렵다. 

/* <number> values */
flex-grow: 1;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

 

flex-basis

flex-basis:auto가 기본속성값

flex-basis:0으로 해주게되면 의도하는 정확한 비율대로 나눌수 있어 사용하기에 효율적이다. 

/* <'width'> 지정 */
flex-basis: 0;
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 원본 크기 키워드 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 플렉스 아이템 내용 크기에 따라 조절 */
flex-basis: content;

/* 전역 값 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

 

See the Pen Untitled by KangJi (@Kangjii) on CodePen.

 

 

Flex 축약형으로 사용하기

See the Pen Untitled by KangJi (@Kangjii) on CodePen.