css flex 가로 정렬

분명히 flex에 row를 적용했는데

가로로 정렬되지 않고 세로로만 정렬된다면

이 포스팅을 자세히 봐주세요.

 

---

1. 문제점 발견

①  가로로 정렬되지 않은 문제점

flex-direction: row;를 적용하면

요소가 가로로 나란히 정렬되어야 하는데

 

위의 이미지처럼 여전히

세로로 정렬되어있는 문제를 발견했습니다.

 

*보시기 편하시라고 색과 위치를 조정했습니다.

실제 적용 색과 다를 수 있습니다.

 

header{  
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

②  css 코드 살펴보기

적용했던 css 코드입니다.

flex 관련 코드들이 잘 들어간 모습입니다.

 

값도 row로 잘 들어가 있고 어디가 문제인지 잘 모르겠습니다.

 

(색 등 같은 다른 코드들은 생략하였습니다.)

 

<header>
        <nav>
            <ul class="gnb">
                <li><a href="index.html">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </nav>
    </header>

③ html 코드 살펴보기

이번엔 html 코드를 살펴보았습니다.

전체에 적용하기 위해 header에 css를 적용했습니다만.

안쪽에 잘 적용되지 않는 모양입니다.

 

-

 

320x100

 

 

 

 

---

2. 문제 파악하기

①  flex를 적용하려는 아이템

문제점이 무엇인지 파악했습니다.

 

제가 flex를 이용해 정렬하려는 아이템은 li태그 안에 있는 메뉴들입니다.

즉, <li> 태그란 말이죠.

 

그런데 <header> 태그에 적용하게 되면

그 아래 자식 태그밖에 적용이 안 되는 것이었습니다.

 

②  css에서 flex를 적용해야 하는 곳

여기서 flex를 적용해야 할 곳은

정렬하고 싶은 아이템의 부모 태그

 

즉, <ul> 태그에 적용해 주어야 합니다.

 

 

 

 

 

 

 

---

3. 문제 해결하기

.gnb{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

①  css 수정

문제를 알았으니 해결해볼까요?

 

css로 돌아와 flex 관련 코드를

<header> 태그에서 <ui> 태그로 이동합니다.

 

.gnb는 ul태그의 클래스 이름입니다.

 

②  해결

저장하고 브라우저에서 확인해보면

flex 가로 정렬이 잘 적용된 모습을 확인할 수 있습니다.

 

여백이나 폰트는 이제부터 수정하면 됩니다.

 

어떤 선택자를 잡느냐는 css에서 항상 중요한 문제네요.

 

 

---

이상으로 css flex 가로 정렬 안될 때 방법을 소개해드렸습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/html + css] - CSS box-shadow 그림자로 음각 효과 내기

CSS box-shadow 그림자로 음각 효과 내기

[coding/html + css] - css 그라데이션 쉽게 넣기

css 그라데이션 쉽게 넣기

 

그럼 이만.

총총.