InternshipFlexbox
Line items up in a row or column and share the space between them.
Use flexbox when items sit along one direction, such as a navigation bar, a row of buttons or a card footer. Set display: flex on the parent, then control the children from there.
Edit the CSS
Preview
| Property | What it does |
|---|---|
flex-direction | row (default) or column |
justify-content | Spacing along the main direction: center, space-between |
align-items | Alignment across it: center, stretch |
flex-wrap: wrap | Lets items move to the next line |
gap | Space between items, with no margin hacks |
flex: 1 | On a child: take the free space |
Centre anything
CSS
.centre {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}