December 17, 2017 4 min to read

flex 에 대해서 알아보자

flex 를 이용해 편하게 블록들을 배치해보자

주의

이 블로그의 내용은 대단히 주관적인 내용으로써, 양질의 글을 읽었지만 똥글이 나오는건 제가 미숙하기 때문입니다. 그럼에도 불구하고 피드백 많이 주신다면 자세히 읽고 검토해서 반영하도록 하겠습니다. 감사하겠습니다.

intro

http://flexboxfroggy.com/#ko

읽기전에 위 링크에 있는 튜토리얼을 먼저 하고나서 글을 보면 좋을것 같다. treehouse에서 만든 튜토리얼로 flex를 이해하는데 이걸로 잠깐 써보면 어느정도 감이 잡히지 않을까 싶다.

왜 flex를 쓸까?

float: left, right를 하고 픽셀을 퍼센트로 고정시키거나 display:inline-block으로 mobile web 처럼 보이는 UI/UX를 구현할 수 있다. 하지만, flex를 이용해서 UI를 짜면 더 쉽다. 심지어 반응형웹에도 쉽게 만들어낼 수 있는 마법의 속성이다.

일반적으로 flex 이전의 것들은 텍스트 중심의 block들을 제어하기위한 속성들이지만, 미디어 콘텐츠를 중심으로 제어하기 위해서는 2퍼센트 부족하다. flex는 이런 점들을 개선하기 위해 나왔으며 기존의 방식보다 더 줄어든 코드로 매끄러운 UI 배치가 되도록 지원할 것이다.

• flex를 쓰고 아래와 같은 panel을 만드는것과 안쓰고 만드는 것. 어떤게 더 편할까?

deceprated

구글링을 하다보면 옛날 자료에서 display:box, display: flexbox 또는 flex() 함수 들을 봐왔을 것이다. 이것들은 옛날자료이다. deceprate 되었다. 또한 flex 가 나오기 이전에는 flexie라는 자바스크립트 라이브러리를 이용해서 flex display UI를 짜기도 하였다. 이 라이브러리는 polyfill 라이브러리로써 사용되었으며 시기는 2009~2011년도에 사용되었다. 현재는 사용하지 않는다.

최근에 사용하는 속성은 display:flex, flex-* 의 속성과 프로퍼티들이다.

flexbox

사용 가능 브라우저

flex 속성 정리

justify-content:

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

align-items:

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

flex-direction:

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

order:

• 기본값은 0 이며 flex 디스플레이의 이하에 있는곳에서

align-self:

align-self 는 개별 요소에 적용할 수 있는 또 다른 속성입니다.

align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.

flex-wrap:

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-flow:

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있습니다. 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받습니다.

• ex): flex-flow: row wrap;
• ex): flex-flow: column wrap-reverse;

align-content:

주의 (align-items와 혼동 금지)

align-content는 여러 줄들 사이의 간격을 지정하며 align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정합니다. 한 줄만 있는 경우, align-content는 효과를 보이지 않습니다.

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

flex-basis:

참고 문서 : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

해당 노드의 넓이값을 고정적으로 정할 수 있다. 또는 키워드로 이름을 정할 수 있다.

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

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

flex-grow:

참고 문서 : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

해당 box의 공간 차지 비율을 정한다. 기본값은 0 이며 자식 노드들에게 상속되지 않는다.

flex-shrink:

참고 문서 : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

flex-grow의 반대로 사용되는 속성값의 사용이며, 초기값은 1이며 상속되지 않는다.

flex:

참고 문서 : https://developer.mozilla.org/ko/docs/Web/CSS/flex 기본값은 [0, 1, auto] 이고 상속되는 속성은 아니다.

flex의 속성은 여러 속성들의 조합으로 만들어 질 수 있는데

1. width / height 의 조합
2. flex-grow / flex-basis 의 조합
3. flex-grow / flex-shrink 의 조합

flex container = (flex나 display들을 감싸고 있는 녀석들)

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

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

정리 및 결론

http://flexboxfroggy.com/#ko 교육용 튜토리얼 게임인데 반드시 하자. 쉽고 빠르게 이해할 수 있다.

Want to see something else added? Open an issue.