헷갈리는 CSS 정리

1. 자식요소 가로로 한줄로 정렬

.file-chip {
    display: flex;
}

1-2. 자식요소 가로로 한줄로 정렬하고 양쪽 끝으로 나누기

.file-chip {
    display: flex;
	justify-content: space-between;
}

2. 자식요소 텍스트 세로 가운데 정렬

.file-chip {
        align-items: center;
}

3. 자식요소 위치 원하는대로 옮기기

.file-chip {
    position: relative;
}

.file-chip-new {
    position: absolute;
    top: -1px;
    left: 1px;
}

4. Position

• left, right, top, bottom을 이용해서 요소의 위치를 이동할 수 있음
• relative : 현재 있는 자리에서 이동
• absolute : 부모의 요소를 기준으로 이동
• fixed : window를 기준으로 이동