새소식

인기 검색어

프론트엔드 공부/HTML & CSS

CSS flex (부모요소 적용 속성)

  • -

flexbox의 기본 개념

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻입니다. 이는 행과 열을 함께 조절하는 CSS 그리드 레이아웃의 2차원 모델과는 대조됩니다.

Flexhttps://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

 

Flexbox - Web 개발 학습하기 | MDN

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용

developer.mozilla.org

GRIDhttps://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout

 

CSS 그리드 레이아웃 - CSS: Cascading Style Sheets | MDN

CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.

developer.mozilla.org

flexbox는 왜 사용하나요?

Flexbox는 CSS 레이아웃 설정에서 기존의 정렬이나 위치를 잡는 방법보다 여러 장점이 있습니다.

  1. 유연성:
    Flexbox는 요소들을 행과 열로 배치할 수 있어서, 화면 크기에 따라 자유롭게 배치할 수 있습니다.
  2. 정렬 기능:
    Flexbox는 요소들을 정렬하는데 편리한 속성을 제공하며, 요소들을 가운데, 오른쪽 또는 왼쪽으로 정렬할 수 있습니다.
  3. 자동 배치:
    Flexbox는 요소들을 자동으로 배치하며, 화면 크기에 따라 요소들을 자동으로 배치할 수 있습니다.
  4. 반응형 레이아웃:
    Flexbox는 반응형 레이아웃을 쉽게 설정할 수 있어서, 모바일 기기에서도 쉽게 레이아웃을 설정할 수 있습니다.
  5. 레이아웃 쉽게:
    Flexbox는 레이아웃을 설정하는데 기존의 레이아웃 설정 방법보다 쉽게 설정할 수 있어서, 개발자들이 레이아웃을 설정하는데 시간을 절약할 수 있습니다
  6. 박스 모델과 무관:
    Flexbox는 박스 모델에 무관하게 작동합니다. 즉, 요소들의 크기를 고정하지 않고, 자동으로 크기를 조절할 수 있습니다.
  7. 요소 순서 변경:
    Flexbox는 요소들의 순서를 쉽게 변경할 수 있는 속성을 제공합니다. 이를 통해 레이아웃을 변경하는데 필요한 기존의 코드를 줄일 수 있습니다.
  8. 요소 크기 자동 조절:
    Flexbox는 요소들을 크기를 자동으로 조절할 수 있는 속성을 제공합니다. 이를 통해 레이아웃을 변경하는데 필요한 기존의 코드를 줄일 수 있습니다.
  9. 요소들 간의 공간 분배:
    Flexbox는 요소들 간의 공간을 분배하는데 편리한 속성을 제공합니다. 이를 통해 레이아웃을 변경하는데 필요한 기존의 코드를 줄일 수 있습니다.
  10. 요소들의 방향 설정:
    Flexbox는 요소들의 방향을 쉽게 설정할 수 있는 속성을 제공합니다. 이를 통해 요소들을 세로로 배치하거나 가로로 배치할 수 있으며, 요소들을 좌우로 배치할 수도 있습니다.
  11. Flex-wrap:
    Flexbox는 요소들이 한 줄에 공간을 넘어서면 자동으로 다음 줄로 이동할 수 있는 flex-wrap 속성을 제공합니다. 이를 통해 레이아웃을 변경하는데 필요한 기존의 코드를 줄일 수 있습니다.
  12. Flex-order:
    Flexbox는 요소들을 순서대로 나열할 수 있는 flex-order 속성을 제공합니다. 이를 통해 요소들의 순서를 쉽게 변경할 수 있습니다.

이러한 장점들 때문에 Flexbox는 레이아웃을 설정하는데에 아주 유용하고 편리한 방법입니다.

예를들어 하나의 컨테이너 속에 아이템이 있을 경우 이전 postition 값으로 중앙 정렬을 한다고 할 때, Flexbox와 CSS position:relative는 레이아웃을 설정하는 방법이 다르지만, 둘 다 요소들을 배치하는데 사용될 수 있습니다.(다른 여러 css 정렬 방법이 있지만 해당 예시는 position으로 적용)

/* css position 으로 중앙정렬 한 경우 */
.container {
    width: 600px;
    height: 600px;
    backgrorund-color: green;
    position: relative;   
}

.item{
    width:200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* css flexbox 이용한 경우 */
.container{
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: space-around;
} 
.item{
    width:200px;
    height: 200px;
    background-color: yellow;
 }

Flexbox는 요소들을 행과 열로 배치하는데 사용되며, 요소들을 정렬하고 배치하는데 쉽게 사용할 수 있습니다. Flexbox는 플렉스 컨테이너와 플렉스 아이템으로 구성되며, 플렉스 컨테이너 안에 있는 플렉스 아이템들이 행과 열로 배치됩니다.

반면에, CSS position:relative는 요소들을 절대적인 위치나 상대적인 위치로 배치하는데 사용됩니다. position:relative를 사용하면 요소를 특정 위치로 이동시킬 수 있으며, z-index를 사용하여 요소들을 정렬할 수 있습니다.

요약하면, Flexbox는 행과 열로 요소들을 배치하는데 사용되며, 정렬하고 배치하는데 쉽게 사용할 수 있으며, position:relative는 요소들을 절대적인 위치나 상대적인 위치로 잡고 해당 위치를 바꾸거나 조정하고자 할대 새로운 조건을 적어줘야 합니다. 

 

flexbox 작성법

Flexbox는 일반적으로 하나의 Flex container와 여러 개의 Flex item으로 구성됩니다. 따라서, Flexbox를 사용할 때 마크업과 스타일은 대략 다음과 같은 형태를 띠게 됩니다.

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
.container {
  display: flex;
}

.item {
  flex: 1;
}

여러 개의 내부 엘리먼트를 담고 있는 외부 엘리먼트(부모 요소)에 display: flex; 스타일을 적용하면, 외부 엘리먼트는 flex container가 되고, 내부 엘리먼트(자식 요소)는 자동으로 flex item가 됩니다. 즉, 부모&자식 관계를 생각하면 됩니다. (마치  ul li 개념)

이렇게 부모에 flex를 지정하고 해당 부모안에 있는 자식요소를 어떻게 정렬 할 지를 부모요소에서 지정합니다. 이때 어떤 방향으로 정렬을 할지를 정해야겠죠?

부모요소에서 작성되는 속성값은 아래와 같다.

  • flex-direction  : 자식 요소 정렬 방법
  • flex-wrap : 자식요소들을 부모 요소의 크기 속으로 감싸 둘 지
  • justify-content : 자식요소들의 주축을 기준으로 어떻게 정렬할지를 결정
  • align-content : 자식요소들의 교차축을 기준으로 어떻게 정렬할지를 결정 (flex-wrap을 이용해 자식 요소들이 두줄 이상으로 정렬된 상태일 때 가능)
  • align-items  : 자식 요소들이 한 주축에만 있을경우 사용

reddit @eludadev

flexbox를 다루려면 주축과 교차축이라는 두 개의 축에 대한 정의를 알아야 합니다. 주축은 flex-direction 속성을 사용하여 지정하며 교차축은 이에 수직인 축으로 결정됩니다. flexbox의 동작은 결국 이 두 개의 축에 대한 문제로 환원됩니다.

flex-direction (주축)

(부모에 작성하면고 자식요소들의 방향을 정해줌, 어느 방향으로 정렬을 할 것인가!)

주축은 flex-direction에 의해 정의되며 4개의 값을 가질 수 있습니다: row, row-reverse, column, column-reversse
row (기본값, 가로  [a,b,c...])
row-reverse(역전된 가로, [...c,b,a])
column (세로, 위에서부터 a, b, c)
column-reverse(역전된 세로, 아래서부터 a, b, c)
row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따릅니다.(flexbox의 기본값)

column 혹은 column-reverse 을 선택하면 주축은 페이지 상단에서 하단으로 블록 방향을 따릅니다.

 

flex-wrap

(자식요소들을 부모 요소의 크기 속으로 감싸 둘 지)

flex-wrap: nowrap; (기본값)

자식요소들의 width크기가 부모요소보다 크면 부모요소의 크기에 맞게 조정되서 한 줄로 들어간다.

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

flex-wrap: wrap;

자식요소들을 수평으로 정렬하다가 부모요소 width를 넘어가면 남는 요소는 아래 줄로 이동한다.

.container{
    display: flex;
    flex-wrap: wrap;
}

flex-wrap: wrap-reverse;

자식요소들을 아래서부터 수평으로 정렬하다가 부모요소 width를 넘어가면 남는 요소는 윗 줄로 이동한다.

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

justify-content

(자식요소들의 주축을 기준으로 어떻게 정렬할지를 결정)

Flexbox를 사용할 때 자주 접하게 되는 속성인 justify-content 속성은 flex item을 main axis(주축)를 기준으로 어떻게 정렬할지를 결정합니다.

기본 값은 flex-start인데, flex item을 main axis의 맨 앞으로 정렬해줍니다. 즉, flex-direction 속성이 row라면 좌측 정렬, flex-direction 속성이 column이라면 상단 정렬이 될 것입니다.

justify-content 속성 값으로는 flex-end, center, space-between, space-evenly, space-around 등을 사용할 수 있습니다. space-로 시작하는 속성 값을 잘 활용하면 상당히 유연한 레이아웃을 큰 노력없이 구성할 수 있습니다.

.container {
  display: flex;
  border: 1px solid black;
  width: 500px;
}

.items {
  height: 100px;
  text-align: center;
  
  :nth-of-type(1) {
    background: red;
  }

  :nth-of-type(2) {
    background: orange;
  }

  :nth-of-type(3) {
    background: yellow;
  }
  
  width: 100px;
  flex-basis: 150px;
}

justify-content: flex-start; (기본값)

자식 요소들을 시작점 기준으로 정렬

<style>
.container{
    display: flex;
    justify-content: flex-start;
}
</style>
justify-content: flex-end;

자식 요소들을 끝점 기준으로 정렬

<style>
.container{
    display: flex;
    justify-content: flex-end;
}
</style>
justify-content: center;

자식 요소들을 가운데 정렬

<style>
.container{
    display: flex;
    justify-content: center;
}
</style>

 

justify-content: space-between;

자식 요소들중 첫번째 요소를 시작점, 마지막 요소를 끝점에 두고 중간의 자식 요소들은 서로 균등하게 나눠진 여백을 두고 정렬

<style>
.container{
    display: flex;
    justify-content: space-between;
}
</style>
justify-content: space-around;

주축의 여백을 각 자식요소들의 좌,우에 균등하게 나눠서 정렬

<style>
.container{
    display: flex;
    justify-content: space-around;
}
</style>

align-content

자식요소들의 교차축을 기준으로 어떻게 정렬할지를 결정
flex-wrap을 이용해 자식 요소들이 두줄 이상으로 정렬된 상태일 때 가능

align-content: stretch; (기본값)

자식 요소들을 수직으로 꽉차게 늘림(자식 요소들이 height값이 설정 되어 있지 않고 수직 여백이 남을 때)

<style>
.container{
    display: flex;
    align-content: stretch;
    flex-wrap: wrap;
}
</style>
align-content: flex-start;
자식 요소들을 교차축의 시작점 정렬
<style>
.container{
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
}
</style>
align-content: flex-end;

자식 요소들을 교차축의 끝점 정렬

<style>
.container{
    display: flex;
    align-content: flex-end;
    flex-wrap: wrap;
}
</style>
align-content: center;

자식 요소들을 교차축의 가운데 정렬

<style>
.container{
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}
</style>
align-content: space-between;

자식 요소 첫번째 주축을 교차축의 시작점, 마지막 주축을 교차축의 끝점에 붙이고, 나머지 여백을 교차축으로 균등하게 분배해서 정렬

<style>
.container{
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
}
</style>
align-content: space-around;

교차축의 여백을 자식 요소 주축 라인들에 균등하게 분배해서 정렬

<style>
.container{
    display: flex;
    align-content: stretch;
    flex-wrap: wrap;
}
</style>

align-items

자식 요소들이 한 주축에만 있을경우 사용

align-items: stretch; (기본값)

자식 요소들을 수직으로 꽉차게 늘림 (자식 요소들이 height값이 설정 되어 있지 않고 수직 여백이 남을 때)

<style>
.container{
    display: flex;
    align-items: stretch;
}
</style>
align-items: flex-start;

자식 요소 주축을 교차축의 시작점 정렬

<style>
.container{
    display: flex;
    align-content: flex-start;
}
</style>
align-items: flex-end;

자식 요소 주축을 교차축의 끝점 정렬

<style>
.container{
    display: flex;
    align-content: flex-end;
}
</style>
align-items: center;

자식 요소 주축을 교차축의 가운데 정렬

<style>
.container{
    display: flex;
    align-content: center;
}
</style>
align-items: baseline;

자식 요소 내부중 문자들의 바닥을 기준으로 정렬

<style>
.container{
    display: flex;
    align-content: baseline;
}
.test:nth-child(2){
    font-size: 50px;
}
</style>

가운데 정렬 방법

.wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
}
<div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

 

저작자표시 비영리 변경금지

'프론트엔드 공부 > HTML & CSS' 카테고리의 다른 글

CSS의 역사와 CSS-in-JS  (0) 2023.02.20
semantic element 시멘틱 요소  (1) 2022.12.24
CSS 선택자 (css selector)  (0) 2022.12.24
HTML, CSS 란?  (0) 2022.12.22
Contents

당신이 좋아할만한 콘텐츠

댓글 0

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.

SHARE

DARK

MENU

티스토리툴바