Styled-components(4) 배열로 된 div를 2열로 나열하기

배열로 된 데이터를 map()를 이용해 동적으로 가져오면, div가 한 영역 안에 길게 나열된다.

하지만 테이블처럼 2열로 레이아웃해야한다면? (한시간 정도 구글링으로 뒤지면서 어려운 길로 빠지려다 가까스로 구원받았다... 흑흑)

자, 그럼 2줄로 나누러 가보자. (딱 2줄의 코드면 해결되더라 ... 허무쓰)

 

결과화면 미리보기

매핑된 데이터라 <div> 로 영역을 나눌 수 없는 상태에서 column을 2줄로 나누어야 한다.

 

---

 

Styled-components(4) 배열로 된 div를 2열로 나열하기

사실 정말 심플하다.

1열 만큼의 width 를 잡아 고정시키고, flex-wrap 속성을 사용하는 것이다.

 

 

<DIV_Box> {items.map(item => <div>item</div>)} </DIV_Box>  // 매핑한 데이터 가져왔다고 가정하고

 

const DIV_Box = styled.div` 
  display: flex; 	// 부모 div 에 flex 속성을 주고 
  flex-wrap: wrap; 	// wrap 속성도 함께 줘버리기
  width: 500px; 	// 부모 div 고정너비 정해주고
  
  div{
    width: 220px; // 자식 본인 div 에 1열에 들어갈 고정 width를 준다. 
  } 
`;

 

결과화면

그럼 한줄이었던 별점평가가 2줄이 된다.