Flex

FlexBox는 Flexible Box의 줄임말이다.

일단 크게 Flex에서는 두가지 형태의 요소들이 존재한다.

• 컨테이너
• 아이템

Flex - Container

처음에는 다음과 같이 시작된다.

.container{
	display : flex; 
 }

• Flex 아이템들의 default direction은 row 이다.
  ( react-native에서는 column 입니다 )

• 자신이 가진 내용물의 width만큼만 차지한다. 이 부분은 inline요소와 비슷하다.

• height은 부모 박스 요소의 높이만큼 알아서 늘어난다.

  다음으로 볼 것은 inline-flex이다.

  .container{
  	display : inline-flex;
  }

• 아이템의 배치와는 관계가 없고, 컨테이너가 주변 요소들과 어떻게 어우러질 지 결정하는 값이다. 이것은 마치 inline-block처럼 동작한다.

• 가로로 쭉 늘어나지 않고, 컨텐츠의 크기에 맞춰서 딱 맞춰준다.

축

Flex를 사용하실 때는 축에 대해서 명확히 알고 있어야 한다.
아이템들이 배치된 방향이 메인축, 그리고 그 메인축과 수직인 축을 교차축이라고 한다.

justifyContents가 관리하는 축이 메인축
alignItems 가 관리하는 축이 교차축이다.

그리고 스스로에 대해서 alignSelf로 부모컨테이너에서 자신의 교차축 정렬을 조정할 수 있다.

flex-direction 배치방향 설정

.container{
	flex-direction : row | column | row-reverse | column-reverse;
}

• 일단 default direction은 row이다.

flex-wrap 줄넘김 처리 설정

반응형 처리에 어떻게 보면 이 부분도 들어가는게 맞는 것 같다.
모양을 맞추기 위해서 줄넘김 처리 없이 해결하면 나중에 뷰포트를 구성요소가 빠져나가는 불상사(?)가 생길 수 있다.

.container{
	display: flex;
    flex-wrap : nowrap | wrap | wrap-reverse
 }

• nowrap
  줄 바꿈을 하지 않고, 넘어가면 뷰포트를 넘어서 나간다. 아까말한 불상사
• wrap
  줄바꿈을 한다. float, inline-block으로 배치한 요소들과 비슷하게 동작한다
• wrap-reverse
  역순으로 wrap

justify-content 메인축 방향 정렬

.container{
	justify-content : flex-start 
   | flex-end | center | space-between | space-around | space-evenly
   }

• center
  가운데 정렬

• space-between
  아이템들의 사이에 균일한 간격을 만들어줌

• space-around
  아이템들의 둘레에 균일한 간격을 만들어줌

• space-evenly
  아이템들의 양 끝에 균일한 간격을 만들어 줌

align-items 교차축 방향 정렬

.container{
	align-items : stretch ( default ) | flex-start | flex-end | center | baseline;
   	}

• stretch ( default )
  아이템들이 수직축 방향으로 쭉 늘어남

• flex-start
  아이템들을 시작점으로 정렬

• flex-end
  아이템들을 끝으로 정렬

• center
  아이템들을 가운데로 정렬

• baseline
  아이템들을 텍스트 베이스 라인 기준으로 정렬

여러행 정렬 - align-content (align-items랑 헷깔리지 말기)

flex-wrap이 wrap으로 설정된 상태에서 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성이다.

.container{
	flex-wrap : wrap;
    align-content : stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
    }

Flex - Item

flex-basis

flex-basis는 flex item의 기본크기를 결정한다.

• direction이 row일때는 너비, column일때는 높이

.item{
	flex-basis : auto; // 기본 값
    flex-basis : 0;
    flex-basis : 50%;
    flex-basis : 50 rem;
    flex-basis : content; // 중요
    }

• auto
  auto(default)는 해당 아이템의 width 값을 쓰나, width를 따로 설정하지 않으면 컨텐츠의 크기가 된다. 즉 width 가 설정되지 않으면 flex-basis : content와 사실상 같다.

flex-grow 유연하게 늘리기

flex-grow는 아이템이 flex-basis 값보다 커질 수 있는지를 결정하는 속성이다. flex-grow에는 숫자가 들어가는데, 몇이든 일단 0보다 큰 값이 세팅되면 해당 아이템이 Flexible box로 변하고 원래의 크기보다 커지며 빈공간을 메우게 된다.
기본값은 0이기 때문에, 따로 적용하기 전까지 아이템은 늘어나지 않는다.

.item{
	flex-grow :1;
    flex-grow :0; // 기본 값
    }

flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하면 된다.

.item: nth-child(1){ flex-grow :1; }
.item: nth-child(2){ flex-grow :2; }
.item: nth-child(3){ flex-grow :1; }

flex-shrink 유연하게 줄이기

flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis 값보다 작아질 수 있는지를 결정한다. flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 Flexible box로 변하고, flex-basis 보다 작아진다.

flex-basis값이 있어야 적용된다. flex-basis값보다 작아졌을 때의 동작을 설정하는 것이라 flex-basis값이 설정되어있어야하고 그것보다 작아져야할 상황에서 의미가 있다.

기본값이 1이기 때문에, 따로 세팅하지 않아도 알아서 줄어든다.

.item{
	flex-basis : 150px;
    flex-shrink: 1; // 기본값
    }

flex - 축약형 ( flex-grow | flex-shrink | flex-basis를 한번에 )

.item{
	flex : 1;
    // flex-grow : 1;
    // flex-shrink : 1;
    // flex-basis : 0%;
    
    flex : 1 1 auto;
    // flex-grow : 1;
    // flex-shrink :1;
    // flex-basis : auto;
    
    flex : 1 500px;
    // flex-grow : 1;
    // flex-shrink : 1;
    // flex-basis : 500px;
    }

주의할 점은 flex:1로 basis를 생략해서 쓰면 flex-basis는 0이 된다는 것이다.

align-self - 수직축으로 아이템 정렬

.item{
	align-self : auto(default) | stretch | flex-start | flex-end | center | baseline;
}

• auto
  기본값은 auto로, 기본적으로 align-items 설정을 상속받는다. 하지만 align-items 보다 align-self가 우선권이 있다.

order - 배치순서

• 각 아이템들의 시작적 나열 순서를 결정한다.
• 숫자값이 들어가고, 작은 값부터 먼저 배치된다.
• 시각적으로만 순서를 지정하는 것일 뿐 HTML 자체의 구조를 바꾸는 것은 아니니 유의해야한다.

z-index - z축 정렬

• z축 정렬
• 숫자가 클수록 위로 올라온다.

참고

word-wrap

긴 단어나 구절이 지정된 요소의 경계를 넘어갈 때 그것을 줄 바꿈하는 방법을 제어하는데에 사용된다.
두가지 속성이 있다.

.box{
	width : 200px;
    border : 1px solid black;
    word-wrap : break-word | normal(default);
    }

• normal
  기본값이며, 긴 단어나 구절이 경계를 넘어가지 않게 한다. 즉, 단어나 구절은 줄바꿈되지 않는다.
• break-word
  긴 단어나 구절이 요소의 경계를 넘어갈 경우, 강제로 단어나 구절을 끊어서 줄바꿈한다.