I want to have 3 divs aligned inside a container div, something like this:
[[LEFT] [CENTER] [RIGHT]]
Container div is 100% wid
Here is a CSS3 method for aligning divs horizontally inside another div.
#container {
display: flex; /* establish flex container */
flex-direction: row; /* default value; can be omitted */
flex-wrap: nowrap; /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
background-color: lightyellow;
}
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
}
The justify-content
property takes five values:
flex-start
(default)flex-end
center
space-between
space-around
In all cases, the three divs are on the same line. For a description of each value see: https://stackoverflow.com/a/33856609/3597276
Benefits of flexbox:
To learn more about flexbox visit:
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.