[CSS] flex 안에 있는 요소 우측정렬
2020. 3. 5. 21:05
반응형
|
1
2
3
4
|
<div class="parent">
<div class="left">one</div>
<div class="right">two</div>
</div>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.parent{
display:flex;
width:500px;
height:50px;
border:1px solid black;
align-items: center;
background-color:yellowgreen;
}
.left, .right{
background-color:yellow;
margin: 0 1rem;
}
.right{
margin-left:auto;
}
|
margin-left : auto; 를 써주면 오른쪽 정렬된다.
*결과물
https://codepen.io/dayoung0510/pen/wvarpav
flex 안 자식요소들 좌측/우측 정렬
...
codepen.io
반응형
'한 걸음 > HTML & CSS' 카테고리의 다른 글
| 반응형 웹이란? (0) | 2022.03.25 |
|---|---|
| [css] 요소 안 내용 줄바꿈 금지 & 말 줄임표(...) 처리 (1) | 2022.01.25 |
| [grid] 한쪽 column만 조금 밀려있는 grid 구현 (0) | 2022.01.18 |
| [CSS] 마우스오버 할 때만 보이는 스크롤바 만들기 (0) | 2020.03.01 |
| [CSS] display: block 상자 자체를 좌우 가운데 정렬하기 (0) | 2020.03.01 |
