CSS flex를 이용해서 li 메뉴바 만들기

by

Flex를 이용한 페이지 상단의 메뉴바 만드는 방법을 간단히 알아 보겠습니다. 사용된 태그는 <nav>, <ul>, <li>입니다.
나무위키 CSS 바로가기

Html 기본 세팅

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex를 이용한 li 메뉴바</title>
</head>
<body>
  <div class="header-wrap">
    <div class="logo-wrap">
      <a href="#">로고</a>
    </div>
    <div class="menu-wrap">
      <ul>
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
      </ul>
    </div>
    <div class="login-wrap">
      <ul>
        <li><a href="#">로그인</a></li>
        <li><a href="#">회원가입</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

CSS 설정

a {
  color:#fff;
  text-decoration:none;
}
a:hover,
a:focus,
a:active {
  color:#999;
}
ul {
  margin:0;
  padding:0;
  list-style:none;
}
.header-wrap {
  display:flex;
  justify-content:space-between;
  background-color:#333;
  padding:10px 15px;
}
.logo-wrap {
  flex:1;
}
.menu-wrap {
  flex:7;
}
.menu-wrap ul {
  display:flex;
  justify-content:center;
}
.menu-wrap ul li {
  margin-right:20px
}
.menu-wrap ul li:last-child {
  margin-right:0px
}
.login-wrap {
  flex:2;
}
.login-wrap ul {
  display:flex;
  justify-content:flex-end;
}
.login-wrap ul li {
  margin-right:10px;
}
.login-wrap ul li:last-child {
  margin-right:0px;
}

CSS 설명하기

  1. header-wrap를 display:flex로 먼저 설정합니다.
  2. header-wrap에 justify-content:space-between를 설정합니다. 해당 설정 시 하위 div의 간격을 동일하게 설정합니다.
  3. logo-wrap에 flex:1 설정, menu-wrap에 flex:7 설정, login-wrap에 flex:2 설정을 합니다. 영역 전체를 10으로 보고, 1:7:2로 영역을 정해주는 설정입니다.
  4. menu-wrap ul에 display:flex;justify-content:center값을 설정하면 li가 중앙 정렬을 하게 됩니다.
  5. login-wrap ul에 display:flex;justify-content:flex-end값을 설정하면 li가 오른쪽 정렬을 하게 됩니다.
  6. 위 5가지 기본적인 flex 설정이었습니다. 하단에 결과보기를 확인해주세요!
결과보기