flexbox

• 유연하게 동작하는 개념이라고 보자
• 블록 요소의 div같은 태그들을 inline요소들로 자유롭게 배치가 가능하다
  (둘러싸고 있는 container의 지정된 너비 안에서 )
• 1차원 직선의 형태들을 나열하기 위해 나온 개념
• 아이템들의 부모에 마법을 주는 것이다 ✨

이를 공부하기위한 용어

• flex cotainer :바깥쪽에 아이템들을 둘러싸고 있는 (부모)
• flex item : container 안에 들어있는 아이템들 (자식)
• main axis : 메인이 되는 축 (주축)
• coss axis : 교차 축

기본 값 -> 축 방향도 변경이 가능하다

diplay의 종류

1)display -outside

• 우리가 기존에 배운 display : blcock, inline , inline - block 이렇게가 있는데 이들은 박스 끼리 의 관계

빨간 박스를 기준으로 바깥 앞,뒤 초록 박스 요소들간의 관계를 정의한 것

2) display - inside : 컨테이너 안의 요소를 어떻게 다룰지를 정의하는 것

빨간 박스 안에 있는 요소들을 어떻게 배치할것인지를 정의하는 것

🙆‍♀️display 를 설정하는건 컨테이너에다가 display 속성을 정의하는 것이라는 걸 잊지말자 , 이제 배우는 요소들이 container 에 적용하는 것인지 items 에 적용하는것임을 구분지어서 생각하자

Container - flex-direction

• 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향을 지정 및 변경할 수 있다
• 1) 주축의 위치를 수평, 수직 을 결정
• 2) 주축의 방향을 정방향으로 갈건지 역방향으로 갈건지를 설정할 수 있다

Values

• row : 기본값 주축의 시작점과 끝점이 콘텐츠 방향과 동일 (👉)

/*flex-direction은 container 속성이기에 컨테이너에 지정*/

.container{
	border: 5px dashed yellow ;
	display:flex;
    flex-direction: row;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
}

• row - reverse : row와 동일하게 동작하지만 시작점과 끝점이 반대에 위치(👈)

.container{
	border: 5px dashed yellow ;
	display:flex;
    flex-direction: row-reverse;
}

• column : 플렉스 컨테이너의 주축이 블록 축과 동일 주축의 시작점과 끝점이 , 글작성 모드의 이전 지점 및 이후 지점과 동일합니다 (👎)

.container{
	border: 5px dashed yellow ;
	display:flex;
    flex-direction: column;
}

• column-reverse : column 과 동일하게 동작하지만 시작점과 끝점이 반대에 위치 (👍)

.container{
	border: 5px dashed yellow ;
	display:flex;
    flex-direction: column-reverse;
}

Container - flex-wrap

• 요소들을 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어서 표현할지를 결정하는 요소

values

• nowrap : 기본 설정값으로 ,flex-container 부모 요소의 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치한다 시작점은 flex-direction에 의해 결정된 방향으로 적용

• wrap : flex-item요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치 일반적으로 위에서 아래로 쌓이는 순서 , item 들이 자신의 너비와 높이를 잃지 않으려고 랩핑을 해준다고 이해하자

.container{
	border: 5px dashed yellow ;
	display:flex;
    flex-wrap: wrap;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
}

-> item 들이 자신의 width 을 유지하기 때문에 나열이 container 의 너비보다 커지면 다음 줄로 넘어간다

• warp-reverse : wrap 속성과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됨

.container{
	border: 5px dashed yellow ;
	display:flex;
    flex-wrap: wrap-reverse;
}

Container - flex-flow

• 단축 속성이다
• flex-direction 과 flex-wrap 의 속성을 사용한다

flex-flow : row wrap

Container - justify-content

• 주축을 기준으로 아이템들을 어떻게 정렬할 건지에 대한 정의
• 주죽을 기준으로 시작부분인지 끝부분인지를 생각해야한다

flex-start

.container{
	border: 5px dashed yellow ;
	display:flex;
    justify-content:flex-start;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
}

• 1번 박스의 위치가 flex-start 의 시작이다

flex-end

• 주축이 끝나는 위치에 정렬을 한다

.container{
	border: 5px dashed yellow ;
	display:flex;
    justify-content:flex-end;
}

flex-center

.container{
	border: 5px dashed yellow ;
	display:flex;
    justify-content:center;
}

-> 주축을 기준으로 가운데 정렬이된다

space-between

• 가운데 있는 애들이 알아서 간격을 잡고 있다고 보면된다
• 주축을 기준으로 flex-start 와 flex-end에 여백없이 자리를 잡게되고

.container{
	border: 5px dashed yellow ;
	display:flex;
    justify-content:space-between;
}

-> 파란색 부분의 간격이 똑같다

space-around

• 각각 요소 앞뒤로 동일한 간격을 추가하게된다

.container{
	border: 5px dashed yellow ;
	display:flex;
    justify-content:space-around;
}

container-align-items

• 덩어리 한줄 자체를 어디에 정렬할지를 정의

jusitify-content 와 align-items 의 차이점

• justify-content는 연두색 박스 안에서 아이템들을 어떻게 정렬할건지에 대한 이야기

• align -items 는 전체 컨테이너에서 연두색을 어디에 정렬할건지를 이야한다

.container{
	border: 5px dashed yellow ;
	display:flex;
    flex-wrap:warp;
    align-items : center;
}

• align-items 는 여러 줄로 나눠지게된다면 각각을 한줄의 요소로 생각하고 적용이된다

strech

• Flex 항목은 너비 및 높이 제약 조건을 고려하면서 항목 여백 상자의 교차 크기가 선과 동일하도록 늘어난다.

flex-start

• 교차축의 시작 점에 자리 잡게 되는 것을 볼수 있다

.container{
	border: 5px dashed yellow ;
	display:flex;
    justify-content:space-between;
    align-items: flex-start;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
}

flex-end

• 교차축의 끝 점에 자리 잡게 되는 것

flex-center

• 전체 중에서 가운데로 들어가게 된다

container-align-content

• 여러 줄에 대한 교차축에대한 정렬을 만드는 방법 (교차축이 기준이다)

flex-start

• 교차축의 시작 점에 붙는다

.container{
	border: 5px dashed yellow ;
	display:flex;
    justify-content:space-between;
    flex-wrap: wrap; 
    align-content: flex-start;
}

.item{
	width: 150px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
}

flex-end

flex-center

space-between

space-around

• 앞뒤의 간격이 생긴다

Item - order

• flex 혹은 grid 아이템에서 현재 아이템의 배치 순서를 지정한다

• 기본값 0 -> 0이라면 html 의 코드 순서를 따라가게된다

• 마이너스 값도 사용 가능 기본값들 보다 앞으로 사용하고 싶을 때 사용

• 화면에 보이는 순서에만 영향을 준다 (탭 키 동작과는 무관함)

.container{
	border: 5px dashed yellow ;
	display:flex;
    flex-wrap: flex;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
}

.item:nth-child(3){
	order:-1
}

item-flex-grow

• flex-item 요소들이 본인이 차지할수 있는 것보다 많은 자리를 차지할수도 적은 자리를 차지하게 할 수도 있다
• 남은 공간을 item들끼리 나눠서 사용할 수 있다
• 0부터 그 이상의 숫자를 value로 사용할 수 있다
• 컨테이너의 공간보다 아이템들이 작아서 나머지 요소들이 나눠갖느것

현재 item들이 각자의 h.w 를 가지고 배치된 모습

.container{
	border: 5px dashed yellow ;
	display:flex;
    flex-wrap: flex;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
    flex-grow : 1;
}

flex-grow: 1로 설정하면 각자 아이템들이 남은 공간을 1씩 나눠서 갖는다

flex 박스를 전부 다 같은 값으로만 설정하지 않을 수 있다

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

.itme:nth-child(3){
	flex-grow : 1
}

📌 동적으로 만드는 헤더나 너비게이션 바를 사용하는데 주로 사용된다

item-flex-shrink

• grow 는 늘어나는데 비해 shrink는 줄어든다고 보자
• item들보다 container 가 너무 작아서 이 안에 들어갈수없는 상황
• 기본값 1 -> 지정해주지 않아도 display: flex 컨테이너면 이미 가지고 있다

.container{
	hegiht: 200px;
	border: 5px dashed yellow ;
	display:flex;
    flex-wrap: flex;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
}

.item:nth-child(1){
	flex-shrink:0;
}

📌 1번만 크기가 줄어들지 않고 자신의 content 박스의 크기를 지키고 있음 줄어든 크기를 2,3 번이 1번꺼까지 나눠가져서 더 줄어들고 있다

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

📌 3번이 줄어드는 크기가 훨씬 더 빠르다 줄어든 영역을 2번과 3번이 나눠서 줄어들었다

item-flex-basis

• flex-basis은 flex 아이템의 초기 크기를 결정

.container{
	hegiht: 200px;
	border: 5px dashed yellow ;
	display:flex;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
    
    flex-grow:1;
}

-> 주황색 영역을 맞춰줘야지 같은 크기로 grow 가 먹ㅎㄹ 수 있는 것이다

.container{
	hegiht: 200px;
	border: 5px dashed yellow ;
	display:flex;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
    
    flex-grow:1;
    flex-basis: 100px;
}

-> 주황색 영역이 grow : 1 해서 1:1:1로 지정될것이다 , 빨간색 영역이 flex-basis : 100px 지정해준 부분이다

.container{
	hegiht: 200px;
	border: 5px dashed yellow ;
	display:flex;
}

.item{
	width: 50px;
    height: 50px;
    margin: 5px;
   	background-color: paleturquoise;
    border: 3px solid blue;
   	font-size:30px;
    
    flex-grow:1;
    flex-basis: 0;
}

-> 기본 베이스 영역이 1로 아이템들 가로길이 그 자체가 1:1:1이 되는 것이다

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

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

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

-> flex-basis 를 0으로 설정했기 때문에 기본 아이템들이 차지하는 영역이 0으로 같고 이들을 각각 5,1,3 (contentbox 기준) 으로 늘어나도록 설정된 결과를 확인할 수 있다

📌flex-grow 나 flex-shrink 를 설정할 때 flex-basis 을 설정을 해줘야지 원하는 만큼 정확하게 늘어나고 줄어들고의 비율이 계산될것이다

item- flex

• flex-grow, flex-shrink, flex-basis 의 단축 속성이다
• 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성
• flex-basis 는 지정하지 않는다고 해서 초기값으로 설정되지 않는다

초기값

• flex-grow:0
• flex-shrink:1
• flex-basis : auto

• 값이 한개 일 때 그 값은 다음 중 하나
  - number 을 지정하면 flex-grow
  • length 혹은 percentage를 지정하면 flex-basis

🚨 주의해야할 점

flex : 1 2 (0) ;

한개 또는 두개의 단위 없는 숫자 값을 사용할 때 flex-basic의 값은 auto가 아니라 0이됩니다(0이 여야지 비율을 계산하는게 더 편하기는 하다 완벽하게 비율 요소를 잡아주기 때문에!! )

• 값이 두개일 때, 첫 번째 값은 number여야하며 flex-grow가 됩니다. 두번 째 값은 다음 중 하나여야 합니다
  - number 은 지정하면 flex-shrink 입니다
  • length, percentage 또는 auto를 지정하면 flex-basis 입니다
• 값이 세개 일 때는 다음 순서를 따라하 합니다
  - 1. flex-grow 에 사용할 number
  • 2. flex-shrink 에 사용할 number
  • 3. flex-basis에 사용할 length, percetage, 또는 auto

item-align-self

• 아이템에 쓸수있는 속성

  .container{
      border: 5px dashed yellow ;
      display:flex;
      flex-wrap:warp;
      align-items : center;
  }

이러한 상태에서 4번만 위로 붙여주고 싶다면

• 별도로 작성해주면 align-item을 무시하고 적용할수있게된다

.item:nth-child(4){
align-self: flex-start;
}