背景
バックエンドからデータを取得し、そのデータをもとにカードを並べたい。
しかし、通常並べるだけでは以下のように無限に横並びになってしまう。
解決策
折り返したい子要素を包む親要素に以下のCSSを指定する。
display:flex;flex-wrapper:wrap;解決画面
以下の通り、親領域に収まらない時は折り返されるようになった。
参考コード
// 折り返したい子要素を包む親要素constCardsWrapper=styled.div`
display: flex;
justify-content: center;
margin-top: 12px;
flex-wrap: wrap; // flexでwrap指定する。
`;// 折り返したい子要素constCardHolder=styled.div`
margin-right: 6px;
`;constApp=()=>{// ...// 取得したデータ数だけカードをレンダリングする関数。constalignCards=(data)=>{return(<CardsWrapper>{data.map((_data,i)=>{return(<CardHolder><SampleCardname={data[i].title}/></CardHolder>)})}</CardsWrapper>)}// ... return(<>{alignCards(movieDataArraysObj)}</>)}exportdefaultApp;