🌟css display flex 사용 가로 또는 세로 정렬하기

날짜:

`display: flex`는 웹페이지의 레이아웃을 만들 때
자식 요소들을 수평 또는 수직 방향으로 위치를 지정할 때 사용된다.
`display: flex`가 지정된 html 요소는 `flex-direction, justify-content, align-items`을 사용하여 내부의 다른 html 요소들을 쉽게 배치할 수 있다.
각각 배치 방향(flex-direction), 가로 정렬(justify-content), 세로 정렬(align-items)을 뜻한다.
단순히 방향과 정렬만 지정해 주면 요소들을 쉽게 배치할 수 있기 때문에,
자주 사용된다.
또한, 위에서 언급한 4가지는 같이 사용되기 때문에 기록해 두자.

css display flex 사용
가로 또는 세로 정렬하기

Using CSS Display FLEX Property
CSS `display: flex` 사용하기

화면에 구성 요소를 배치하는 레이아웃 작업은 번거롭다.
때문에 css의 `display: flex`를 사용하면 
html5 요소들을 가로 또는 세로 정렬하여 편하게 구성할 수 있다.
단순히 container로 사용할 div 요소에 설정하면,
자식 html5 요소들을 가로 또는 세로로 배치할 수 있다.
특히, 반응형 웹을 위해 레이아웃을 구성할 때 `display: flex`는 괜찮은 방법 중 하나이다.

함께하는 요소 4가지

`display: flex`를 사용하여 레이아웃 또는 자식 html 요소들을 배치할 때 
거의 함께하는 요소들이 있다.
4가지 정도이며, 의미 정도는 알아두자.

  • display: flex
    • flex-direction
      • 자식 요소들을 배치하는 주축 방향 설정
    • justify-content
      • 주축 방향 정렬 방법
    • align-items
      • 교차축 방향 정렬 방
    • flex-wrap
      • 줄바꿈 여부

주축과 교차축

`display: flex`를 사용할 때 중요한 개념이 주축과 교차축이다.
주축과 교차축은 `flex-direction`에 지정된 값으로 결정된다.
주축은 main axis, 교차축은 cross axis 이다.
`flex-direction`로 지정된 방향이 주축( main axis )이고,
엇갈린 축이 교차축( cross axis)이다.
`display: flex`로 설정된 부모 요소의 자식요소들을
가로로 배치하려면 `flex-direction: row`로 지정하면
주축은 가로, 교차축은 세로가 된다.
반대로,
`display: flex`로 설정된 부모 요소의 자식요소들을
세로로 배치하려면 `flex-direction: column`로 지정하면
주축은 세로, 교차축은 가로가 된다.

주축: 가로, 교차축: 세로

display: flex;
flex-direction: row;

주축: 세로, 교차축: 가로

display: flex;
flex-direction: column;

아래의 이미지와 비교해 보자.
부모 div 태그에 `display: flex`을 지정했다.
그리고, `flex-direction`을 `row 또는 column` 중 하나로 지정한 것에 따라 `주축과 교차축`이 변경된다.
즉, `flex-direction`으로 지정된 방향이 `주축`, 교차되는 방향이 `교차축`이 된다.

flex-direction: row
주축: 가로, 교차축: 세로,
flex-direction: column
주축: 세로, 교차축: 가로

상세한 옵션들

`display: flex`의 기본 개념을 살펴봤다.
`flex-direction`에 설정된 설정값이 row 또는 column에 따라 주축과 교차축이 결정된다.
쉽게 풀이하면,
`flex-direction: row`인 경우 주축은 가로, 가로축은 세로가 된다.
`flex-direction: column`인 경우 주축은 세로, 가로축은 가로가 된다.
이제 옵션에 `display: flex`의 옵션들에 대해 간단히 살펴본다.

  • display: flex
    • 세로 또는 가로로 자식 요소들을 배치한다.
  • flex-direction
    • 설정값이 주축(main axis)
      • row
        • 주축: 가로 ( 좌->우 )
        • 교차축: 세로 ( 위->아래 )
      • column
        • 주축: 세로 ( 위->아래 )
        • 교차축: 가로 ( 좌->우 )
      • row-reverse
        • 주축: 가로( 우->좌 )
        • 교차축: 세로( 위->아래 )
      • column-reverse
        • 주축: 세로 ( 아래->위 )
        • 교차축: 가로 ( 좌->우 )
  • justify-content
    • 주축을 기준으로 자식 요소들을 정렬한다.
    • flex-start
      • 자식 요소들을 시작 지점에 정렬한다.
    • flex-end
      • 자식 요소들을 끝 지점에 정렬한다.
    • center
      • 자식 요소들을 가운데 지점에 정렬한다.
    • space-between
      • 자식 요소들에 동일한 간격을 설정하고 양 끝에 여백을 제거한다.
    • space-around
      • 자식 요소들에 동일한 간격을 설정하고 양 끝에 여백을 설정한다.
    • space-evenly
      • 자식 요소들에 모든 간격을 동일하게 설정한다.
  • align-items
    • 교차축을 기준으로 자식 요소들을 정렬한다.
      • stretch
        • 자식 요소들을 교차 축 방향으로 늘려 맞춘다.
      • flex-start
        • 자식 요소들을 시작 지점에 정렬한다.
      • flex-end
        • 자식 요소들을 끝 지점에 정렬한다.
      • center
        • 자식 요소들을 가운데 지점에 정렬한다.
      • baseline
        • 자식 요소들을 텍스트 기준선 기준으로 정렬한다.
  • flex-wrap
    • 자식요소들이 한 줄에 들어가지 않을 경우
      줄바꿈할지 여부를 설정한다.
      • nowrap
        • 줄바꿈 안함.
      • wrap
        • 아랫방향 줄바꿈 허용.
      • wrap-reverse
        • 윗방향 줄바꿈 허용.

코딩하기 / 눈으로 확인하기

위에서 언급한 `display: flex`와 옵션들이 어떻게 동작하는지 
눈으로 확인할 때가 되었다.
`display: flex`는
자식요소들을 가로( row ), 세로( column ) 방향으로 정렬한다. 라는 점과
`flex-direction: row 또는 column`에 따라 주축과 교차축이 결정된다는 점을
기억하자.

기본코드 작성하기

css의 `display: flex`를 테스트하기 위해 
기본적인 html 코드를 준비한다.
이미지 3개를 준비했고, css style을 사용해 대충 표시만 해 주었다.
어렵지 않은 구조이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display: flex</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        img {
            width: 200px;
            padding: 5px;
        }

        .border1 {
            border: 1px solid black;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="border1">
        <img src="https://i.pinimg.com/736x/04/bd/e8/04bde88b4bccf992d6ad88f0309c82f2.jpg">
        <img src="https://i.pinimg.com/736x/45/25/bd/4525bd1594df6567f2537a3d23c19df1.jpg">
        <img src="https://i.pinimg.com/736x/6a/9e/fe/6a9efe6208810ceb3158e640690453ba.jpg">
    </div>
    <div class="border1">
        <img src="https://i.pinimg.com/736x/04/bd/e8/04bde88b4bccf992d6ad88f0309c82f2.jpg">
        <img src="https://i.pinimg.com/736x/45/25/bd/4525bd1594df6567f2537a3d23c19df1.jpg">
        <img src="https://i.pinimg.com/736x/6a/9e/fe/6a9efe6208810ceb3158e640690453ba.jpg">
    </div>
</body>
</html>

위의 코드에 대한 결과화면은 다음과 같다.

기본코드 준비, 이미지만 표시

이제 `display: flex`의 기본적인 사용법만 확인해 보자.
상세한 것은 다음에 확인해 본다.
위에서 언급했듯 
먼저, `display: flex`는 `flex-direction`과 함께 사용된다.
`flex-direction: row`는
메인축이 가로, 교차축은 세로, 좌에서 우로 자식요소들이 배치된다.
`flex-direction: column`은
메인축이 세로, 교차축은 가로, 위에서 아래로 자식요소들이 배치된다.
이제 코드를 보고 직접 확인해 보자.

display: flex / flex-direction: row
메인축 가로, 교차축 세로, 좌->우 자식 요소 배치

`display: flex`는 'flex-direction: row'과 함께 사용하면
자식 요소들은 가로로 배치된다.
메인축은 가로, 교차축은 세로, 좌->우 방향으로 자식 요소가 배치된다.
기본코드는 다음과 같다.

/* 기본코드 */
display: flex;
flex-direction: row;

위의 코드를 style로 정의하고, 위에서 언급한 기본코드에 작성한다.
아래는 전체코드이며,
참고할 부분은 `.displayFlexRow`을 참고하면 된다.


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display: flex</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        img {
            width: 200px;
            padding: 5px;
        }

        .border1 {
            border: 1px solid black;
            padding: 5px;
            margin: 5px;
        }

        .displayFlexRow {
            display: flex;
            flex-direction: row;
        }

    </style>
</head>
<body>
    <div class="border1 displayFlexRow">
        <img src="https://i.pinimg.com/736x/04/bd/e8/04bde88b4bccf992d6ad88f0309c82f2.jpg">
        <img src="https://i.pinimg.com/736x/45/25/bd/4525bd1594df6567f2537a3d23c19df1.jpg">
        <img src="https://i.pinimg.com/736x/6a/9e/fe/6a9efe6208810ceb3158e640690453ba.jpg">
    </div>
</body>
</html>

위의 코드에 대한 결과화면은 다음과 같다.
자식 요소인 이미지들이 배치되는 형태는
메인축은 가로, 좌에서 우로 정렬되는 것을 확인할 수 있다.

display: flex / flex-direction: row
메인축: 가로 / 교차축: 세로 / 좌->우: 배치 정렬

display: flex / flex-dirction: column
메인축 세로, 교차축 가로, 위->아래 자식 요소 배치

`display: flex`는 `flex-direction: column`과 함께 사용하면 
자식요소들은 세로로 배치된다.
메인축은 세로, 교차축은 가로, 위->아래 방향으로 자식 요소가 배치된다.
기본코드는 다음과 같다.

display: flex;
flex-direction: column;

위의 코드를 style로 정의하고, 위에서 언급한 기본코드에 작성한다.
아래는 전체코드이며,
참고할 부분은 `.displayFlexColumn`을 참고하면 된다.


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display: flex</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        img {
            width: 200px;
            padding: 5px;
        }

        .border1 {
            border: 1px solid black;
            padding: 5px;
            margin: 5px;
        }

        .displayFlexColumn {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <div class="border1 displayFlexColumn">
        <img src="https://i.pinimg.com/736x/04/bd/e8/04bde88b4bccf992d6ad88f0309c82f2.jpg">
        <img src="https://i.pinimg.com/736x/45/25/bd/4525bd1594df6567f2537a3d23c19df1.jpg">
        <img src="https://i.pinimg.com/736x/6a/9e/fe/6a9efe6208810ceb3158e640690453ba.jpg">
    </div>
</body>
</html>

위의 코드에 대한 결과화면은 다음과 같다.
자식 요소인 이미지들이 배치되는 형태는
메인축은 세로, 위에서 아래로 정렬되는 것을 확인할 수 있다.

display: flex / flex-direction: column
메인축: 세로 / 교차축: 가로 / 위->아래: 배치 정렬

가로, 세로 / 메인축, 교차축

`display: flex`는 자식 요소들을 `가로 또는 세로`로 배치하는 역할을 하며,
`flex-direction`을 사용해 `row ( 가로 )` 또는 `column ( 세로 )`을 사용하여 자식 요소들의 배치를 설정한다.
`flex-direction`에서 설정된 값으로 메인축과 교차축이 설정된다.
메인축은 눈에 보이는 그대로이며, 교차축은 다른 값을 통해 자식 요소를 배치할 수 있다.

  • display: flex
    • 자식 요소를 세로 또는 가로로 배치
  • flex-direction: row
    • 메인축: 가로 / 교차축: 세로
  • flex-direction: column
    • 메인축: 세로 / 교차축: 가로

댓글

댓글 쓰기