Understanding CSS Flexbox

I'm happy to study CSS Flexbox 💫 

Today's blog, I will test various properties related to flexbox.

 

 

What is Flexbox?

---

• 플렉스 박스는 행 또는 열을 주축으로 설정해 요소를 배치 및 정렬하는 1차원 레이아웃 방식입니다. 
• 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템간의 상호작용을 통해 결정됩니다.
• 플렉스 컨테이너란? 플렉스박스 방식으로 레이아웃을 결정할 요소이고 플렉스 아이템이란? 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소입니다.

 

이때 플렉스 박스는 두 개의 축을 제공하는데요. 그 중 하나의 축을 주축으로 해 요소를 배치하게 되며 기본 값은 가로 방향 (왼쪽에서 오른쪽)입니다.

 

ul 우측에 flex 라는 표시가 생긴 걸 확인 할 수 있는 것처럼 ul은 flex container가 되며 li는 flex item 입니다. flex item은 flex container의 주축을 따라 일렬로 정렬이 되는 것을 확인할 수 있습니다.

 

flex-direction, flex-wrap, flex-flow 

---

*{
    box-sizing: border-box;
}
body{
    margin: 0;
}

ul{
    display: inline-flex;
    padding: 0;
    list-style-type: none;
    height: 200px;

    flex-direction: row;
    flex-wrap: nowrap;
    // flex flow: row-reverse wrap;
}

flex-direction는 플렉스 컨테이너의 주축을 결정하는 속성입니다. 행은 가로축, 열은 세로축을 주축으로 하죠. 속성값 (row, row-reverse, column, column-reverse)를 변경하며 주축과 방향을 손볼 수도 있습니다.

 

flex-wrap은 아이템들이 한줄에 배치되도록 할 것인지, 또는 여러 행으로 나눠 표현할 것인지 결정하는 속성입니다. 

• nowrap: 한 줄 배치
• wrap: 여러 행에 걸쳐 배치

flex-flow는 flex-direction과 flex-wrap을 동시에 사용할 수 있는 속성입니다.

 

 

justify-content

---

jusfify-content는 플렉스 아이템들이 플렉스 박스의 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식을 결정합니다.

justify-content: space-around;

 

space-around는 모든 요소가 동일한 여백을 갖도록 배치합니다.

justify-content: space-between;

space-between은 주축에서 일정한 간격을 둔 채 양끝 정렬 배치합니다.

justify-content: space-evenly

space-evenly는 모든 요소 사이의 간격을 동일하게 유지해 배치합니다.

 

 

align-items, align-self, align-content

---

align-items는 플렉스 컨테이너의 교차축 위에서 플렉스 아이템들이 어떤 식으로 정렬될 것인지를 결정합니다.

 

align-items: flex-start;

 

ul{
    display: flex;
    padding: 0;
    list-style-type: none;
    height: 200px;
    
    border: 5px solid green;
    align-items: center;
}

li:nth-child(3){
    align-self: flex-start;
}

 

ul은 align-items: center로 설정하고 3번째 요소에만 flex-start로 설정하면... Orange만 위쪽으로 올라간 모습도 확인할 수 있습니다.

 

 

flex-grow, flex-shrink

---

flex-grow는 플렉스 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성입니다.

 

flex-shrink는 플렉스 아이템이 기본 크기모다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성입니다.

 

flex-grow: 1;

 

order

---

플렉스 아이템의 배치 순서를 설정할 수 있으며 지정한 숫자에 맞춰 오름차순으로 배치가 된다. 이는 코드에 영향을 끼치는 것이 아닌 보여지는 순서에만 영향을 줍니다.

li:nth-child(1){
    order: 5;
}
li:nth-child(2){
    order: 4;
}
li:nth-child(3){
    order: 3;
}
li:nth-child(4){
    order: 2;
}
li:nth-child(5){
    order: 1;
}

 

Hope you'll enjoy playing with flexbox! 😁