Brandon Korenek Brandon Korenek - 5 months ago 10
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

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.

Comments