1
2
3
Aligning <div> boxes inside a parent <div> can get confusing (well, to me at least)
so I have attempted to do some examples (see box to the right).
Depending on what you are trying to do depends on how you need to code it.
Here I found that making the parent <div> set to be display: flex; worked best.
If you need ALL your div's to start on the RIGHT (A) or CENTER (B) or LEFT (C) then you can
use the
justify-content: property on the parent div.
The other examples get more complicated and using a display:grid; instead of display:flex;
may be a better way to go (see my page on grids for examples).
But if not using a grid then...
(D)
Uses a combination of float:left;, margin: 0 auto; & float:right; properties
On my code I used inline styles on each child <div> to make it easier to follow.
(E)
Uses a combination of other properties.
For instance I needed to make the parent position:relative; so I could use the properties...
top, right, bottom, transform etc.
On my code I used inline styles on each child <div> to make it easier to follow.
(F)
Uses a combination of align-items, float & margin properties
On my code I used inline styles on each child <div> to make it easier to follow.
(G)
Uses a combination of other properties.
For instance I needed to make the parent position:relative; so I could use the properties...
float, top, right, transform etc.
On my code I used inline styles on each child <div> to make it easier to follow.
(A) justify-content:flex-end;
(B) justify-content:center;
(C) justify-content:flex-start;
(D) uses float/margin
(E) uses top/right/transform etc
(F) uses align-items/float/margin
(G) uses top/right/transform etc