<div id="readability-page-1" class="page"><div><blockquote>
css flex에 대해 더 자세히 알고싶다면, <a href="https://velog.io/@eunjeong/CSS-Flex-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B8%B0">이 글</a>을 읽어주세요!
</blockquote>
<h2 id="목표">목표</h2>
아래 이미지와 같이 만드려고 합니다. 
<img src="https://media.vlpt.us/images/eunjeong/post/a1f8eb1f-6fb7-4f6c-a122-fc62eda19dd3/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-13%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.54.08.png">
<h2 id="css">CSS</h2>
html class로 표현하면 아래와 같겠네요. 
flex를 사용하기 위해 .parent와 우측정렬하기 위한 .btn이 필요하겠네요. 
<img src="https://media.vlpt.us/images/eunjeong/post/61ccaaa0-822c-4ee6-91a5-442f0f54a4df/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-13%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.57.28.png">
❗️우측정렬을 위해 .btn에 'margin-left:auto'를 사용합니다.
<pre><code>.parent{
	display: flex;
 align-items: center; /* 세로 중앙정렬 */
 padding: 10px 20px; /* 여백 */
}
.btn{
	margin-left: auto;
}</code></pre>
<h2 id="결과">결과</h2>
배경색, 폰트사이즈와 같은 css는 위 코드에서 생략했습니다. 
<img src="https://media.vlpt.us/images/eunjeong/post/1ac9bd4a-882a-439a-a85d-ccaac292b879/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-13%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.04.15.png">
<hr>
<h3 id="도움">도움</h3>
<ul>
<li><a href="https://min23th.tistory.com/98?category=988440">코딩하는 정할매</a></li>
</ul></div></div>

eunjeong.log

css flex에 대해 더 자세히 알고싶다면, 이 글을 읽어주세요!
목표
아래 이미지와 같이 만드려고 합니다.
CSS
html class로 표현하면 아래와 같겠네요.
flex를 사용하기 위해 .parent와 우측정렬하기 위한 .btn이 필요하겠네요.
❗️우측정렬을 위해 .btn에 'margin-left:auto'를 사용합니다.
.parent{
    display: flex;
    align-items: center; /* 세로 중앙정렬 */
    padding: 10px 20px; /* 여백 */
}
.btn{
    margin-left: auto;
}
결과
배경색, 폰트사이즈와 같은 css는 위 코드에서 생략했습니다.
도움
코딩하는 정할매

[TIL] flex 우측 정렬

댓글