[2021.02.18] (TIL)DOM 요소를 가로, 세로 반대로 배치하는 법

 

가볍게 CSS 관련 TIL 하나 작성해보려고 한다.

일반적으로 DOM 요소를 그리는 순서는 위에서 아래로, 좌에서 우로 되어있다.
그러나 특정 상황으로 인해 DOM 요소를 아래에서 위로, 혹은 오른쪽에서 왼쪽으로 그려야 할 때가 있다.

 

아래 코드를 통해 가볍게 DOM을 그렸다.

const ARRAY = ["하나", "둘", "셋"];

const App = () => {
  return (
    <div className='wrapper'>
      {ARRAY.map(str => (
        <div>{str}</div>
      ))}
    </div>
  );
};
export default App;

CSS에서 display와 flex-direction 속성을 이용해서 해당 요소의 내부 요소들을 반대로 배치할 수 있다.

 

아래에서 위로 배치

.wrapper {
    display: flex;
    flex-direction: column-reverse;
}

오른쪽에서 왼쪽으로 배치

.wrapper {
    display: flex;
    flex-direction: row-reverse;
}

 

CSS 레이아웃 작업 바로바로 작업할 수 있도록 팍팍 외우자~!