how to align flex box vertical using flex-wrap: wrap

jeanne sedin 0
Viewed 21

enter image description here

I'm currently making a to-do-list thing. When I add a folder, the folder is aligned vertically.

(click /Bottom bar/ button -> it shows a /Homecomponent/ folder)

If i add a folder, it keeps going down

but I want the folder aligned like image on the right I did use flex-wrap css all the div.. but couldn't figure out

this is a code

const CreateFolder = () => {let space = <div>

  <img className="space" alt="" src="/image/folder-icon.png" /> Adrina  <img className="dwarrow" alt="" src="/image/dwarrow_icon.png"/> </div>

const [createFolder, setCreateFolder] = useState([])

const addItem = (e) => {setCreateFolder([...createFolder, space])}

return (
<div><Bottombar  submit={addItem}/>

<Homecomponent createFolder={createFolder}/>

</div>
)}

export default CreateFolder
flexbox reactjs css
1 Answers

So if you want to keep the todo list vertically aligned you can try this approach:

{
  display: flex;
  flex-direction: column;
  max-height: 600px; // you must set in order to apply the flex wrap
  flex-wrap: wrap;
  gap: 9px;
}

enter image description here

Miguel Hidalgo0
Related