Brandon Korenek Brandon Korenek - 2 years ago 60
HTML Question

How to make boxes align side-by-side instead of on top of each other in flexbox?

Wondering why the

itemContainer
and
priceContainer
won't show up next to each other?

Do I need to include any kind of file for FlexBox?

I thought it was built into CSS3. Is there a standard add-on to utilize?



.container {
display: flex;
display: -webkit-flex;
width: 100%;
height: 100%;
flex-direction: row;
}
#orderContainer {
width: 15%;
border: 1px solid #f2f2f2;
height: 100%;
flex-direction: row;
}
#selectionsContainer {
width: 85%;
}
#catagoryContainer {
width: 100%;
height: calc(20% - 2px);
border: 1px solid #f2f2f2;
}
#menuContainer {
width: 100%;
height: 80%;
border-top: 0px;
border: 1px solid #f2f2f2;
}
#itemContainer {
width: 70%;
height: 80%;
border: 1px solid #f2f2f2;
display: flex;
order: 1;
}
#priceContainer {
width: calc(30% - 2px);
height: 80%;
border: 1px solid #f2f2f2;
display: flex;
order: 2;
}

<div class="container">
<div id="orderContainer">
<div id="itemContainer">
itemContainer
</div>
<div id="priceContainer">
priceContainer
</div>
</div>

<div id="selectionsContainer">
<section id="catagoryContainer">
catagoryContainer
</section>
<section id="menuContainer">
menuContainer
</section>
</div>
</div>




Answer Source

The only thing necessary to make two sibling elements show up next to each other is declare display: flex on the parent container.

You've applied display: flex to .container. This is not the parent container of #itemContainer and #priceContainer. You need to apply display: flex to #orderContainer.

A flex formatting context is limited in scope to a parent / child relationship. Descendants beyond the children will not accept flex properties from an ancestor.

You will always need to apply display: flex (or display: inline-flex) to parent elements in order for flex properties to work on the children.


Once you've established the flex container, several default settings come into play. Here are two:

  • flex-direction: row - child elements (flex items) will align horizontally
  • flex-wrap: nowrap - flex items are forced to stay in a single line

Flexbox is a CSS3 technology. You don't need to add any library or other file to make it work. It runs like any other CSS. Just be aware of browser support.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download