프론트
css) ul > li > a 구조 flex, grow, flex-grow 이용한 로그인바 링크 배치
뽀짝코딩
2024. 10. 31. 12:48
728x90
홈피 상단 로그인바 html 구조와 css배치가 다를 때
1. grow로 순서를 잡고
2. flex-grow로 간격을 px나 margin이 아닌 auto나 flex-grow 등 가변적 수치로 조절하는 것이 좋다.
[ html ] 구조
<!-- 로그인 바 -->
<ul class="login-bar">
<li><a href="/">로그인</a></li>
<li><a href="/">회원가입</a></li>
<li><a href="/">고객센터</a></li>
<li><a href="/">즐겨찾기</a></li>
<li><a href="/">쇼핑나들이</a></li>
</ul>
먼저 li > a를 감싸고 있는 login-bar클래스의 ul을 display: flex로 배치했다.
순서를 order 를 사용해
[로그인 > 회원가입 > 고객센터 > 즐겨찾기 > 쇼핑나들이 ]를 [1, 2, 3, 4, 5]가 아닌
[ 즐겨찾기 > 쇼핑나들이 > 로그인 > 회원가입 > 고객센터 ]를 [4, 5, 1, 2, 3]로 변경했다.
다음, [ 즐겨찾기, 쇼핑나들이 ] / [ 로그인 > 회원가입 > 고객센터 ] 이렇게 두 덩어리로 띄우는걸
flex-grow를 사용했다.
아래는 최종 css 코드와 최종 이미지이다.
[ css ]
/* 로그인 바 */
.login-bar {
padding: 0.5rem 0;
display: flex;
justify-content: center;
align-items: center;
height: 3.6rem;
font-size: 12px;
background: var(--color-yellow-100);
}
.login-bar li:nth-of-type(1),
.login-bar li:nth-of-type(4) {
padding: 0.5rem 0.8rem;
flex-grow: 1;
}
.login-bar li:nth-of-type(2),
.login-bar li:nth-of-type(3),
.login-bar li:nth-of-type(5) {
padding: 0.5rem 0.8rem 0.5rem 0;
flex-grow: 1;
}
.login-bar li:nth-of-type(1) {
order: 3;
}
.login-bar li:nth-of-type(2) {
order: 4;
}
.login-bar li:nth-of-type(3) {
order: 5;
}
.login-bar li:nth-of-type(4) {
order: 1;
}
.login-bar li:nth-of-type(5) {
order: 2;
flex-grow: 70;
}
flex-grow를 사용하기 전에는 margin-right: 71.8rem; 이렇게 사용했다.
px로 고정한게 아니니 그나마 가변적이라고 생각했는데 flex-grow라는 방법이 있었다.
참고
나
반응형