코카티비-CoCaTV

코딩ㆍ개발 정보/HTML 연습

[CSS] 2 x 2 이상의 자식을 가진 요소의 flex 레이아웃으로

RioRex 2024. 7. 24.
2 x 2 이상의 자식을 가진 요소의 flex로 할 수 있는 것들을 설명해줘

 

Flexbox 레이아웃을 사용하여 2개 이상의 자식을 가진 요소를 다양한 방식으로 구성할 수 있습니다. Flexbox는 웹 페이지의 레이아웃을 디자인하는 데 매우 유용하며, 자식 요소들을 정렬하고 공간을 배분하는 데 도움을 줍니다. 다음은 Flexbox를 사용하여 2개 이상의 자식을 가진 요소에서 할 수 있는 몇 가지 주요 작업입니다.

1. 주 축 정렬 (Main Axis Alignment)

justify-content 속성을 사용하여 주 축(main axis)에서 자식 요소들을 정렬할 수 있습니다.

  • flex-start: 자식 요소들을 주 축의 시작 부분에 정렬합니다.
  • flex-end: 자식 요소들을 주 축의 끝 부분에 정렬합니다.
  • center: 자식 요소들을 주 축의 중앙에 정렬합니다.
  • space-between: 자식 요소들 사이에 동일한 간격을 둡니다.
  • space-around: 자식 요소들 주위에 동일한 간격을 둡니다.
  • space-evenly: 자식 요소들 사이와 양 끝에 동일한 간격을 둡니다.
.container {
    display: flex;
    justify-content: center;
}

 

2. 교차 축 정렬 (Cross Axis Alignment)

align-items 속성을 사용하여 교차 축(cross axis)에서 자식 요소들을 정렬할 수 있습니다.

  • flex-start: 자식 요소들을 교차 축의 시작 부분에 정렬합니다.
  • flex-end: 자식 요소들을 교차 축의 끝 부분에 정렬합니다.
  • center: 자식 요소들을 교차 축의 중앙에 정렬합니다.
  • baseline: 자식 요소들의 텍스트 베이스라인에 따라 정렬합니다.
  • stretch: 자식 요소들이 컨테이너를 가득 채우도록 늘립니다.
.container {
    display: flex;
    align-items: stretch;
}

 

3. 여러 줄 정렬 (Multi-line Alignment)

flex-wrap 속성을 사용하여 자식 요소들이 여러 줄에 걸쳐 배치되도록 할 수 있습니다.

  • nowrap: 모든 자식 요소들을 한 줄에 배치합니다.
  • wrap: 자식 요소들이 여러 줄에 걸쳐 배치되도록 허용합니다.
  • wrap-reverse: 자식 요소들이 여러 줄에 걸쳐 역순으로 배치되도록 허용합니다.
.container {
    display: flex;
    flex-wrap: wrap;
}

 

4. 개별 자식 요소 정렬 (Individual Item Alignment)

각 자식 요소에 대해 align-self 속성을 사용하여 개별적으로 교차 축에서 정렬할 수 있습니다.

  • auto: 부모 컨테이너의 align-items 값을 따릅니다.
  • flex-start: 자식 요소를 교차 축의 시작 부분에 정렬합니다.
  • flex-end: 자식 요소를 교차 축의 끝 부분에 정렬합니다.
  • center: 자식 요소를 교차 축의 중앙에 정렬합니다.
  • baseline: 자식 요소의 텍스트 베이스라인에 따라 정렬합니다.
  • stretch: 자식 요소가 컨테이너를 가득 채우도록 늘립니다.
.item {
    align-self: center;
}

 

5. 자식 요소의 크기 조절 (Sizing of Child Elements)

flex-grow, flex-shrink, flex-basis 속성을 사용하여 자식 요소들의 크기를 조절할 수 있습니다.

  • flex-grow: 자식 요소의 성장 비율을 설정합니다.
  • flex-shrink: 자식 요소의 축소 비율을 설정합니다.
  • flex-basis: 자식 요소의 기본 크기를 설정합니다.
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

 

예제

아래는 flexbox를 사용하여 3개의 자식을 가진 컨테이너의 다양한 정렬 및 배치 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            border: 1px solid black;
            padding: 10px;
        }
        .item {
            flex: 1;
            padding: 20px;
            border: 1px solid red;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

이 예제에서는 컨테이너 안의 자식 요소들이 flexbox를 사용하여 다양한 방식으로 정렬되고 배치될 수 있음을 보여줍니다. Flexbox는 웹 페이지 레이아웃을 쉽게 구성하고 다양한 장치 크기에 대응할 수 있도록 도와줍니다.

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

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[CSS] 스타일시트 팁 30가지  (0) 2024.07.24
[HTML] 부모 relative, 자식 absolue 사이에, wrapper 태그를 삽입?  (0) 2024.07.24
[CSS] 웹페이지 스타일링 - 부모와 자식관계 7  (0) 2024.07.24
[HTML] 모바일 우선, 반응형 페이지 만들기  (0) 2024.07.24
[웹폰트] NotoSans 에서 Pretendard 사용 방법  (0) 2024.07.24

댓글

티스토리툴바