[css] flex-grow

1) flex-grow : 비율로 여백 주기

 

이 아래를 

아래처럼 만들고싶다면!?

참고로 텍스트 세개에 대해 하나의 div로 묶어서 margin: 20px로 주고, #건성#민감성은 align-self:end 추가적용필요!

 

import "./MyPage.scss";

function MyPage() {
  return (
    <>
      <div className="edit-user-info">
        <div className='user-name'>먀먀님</div>
        <div className='user-skin-type'>
            <span>#건성</span>
            <span>#민감성</span>
        </div>

        <div>
            <button className="edit-info-btn">내 정보 수정하기</button>
        </div>
      </div>
    </>
  );
}

export default MyPage;

.edit-user-info {
    border: solid #8E8A8A 0.1rem;
    // padding: 1rem 3rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;

    .user-name {
        // flex-grow: 2; // 다 조절할 필요없이이
    }
    

    .user-skin-type {
        flex-grow: 1; // 얘만 조절하면 양쪽으로 밀림!!>.< 
    }
    
}