Flex box horizontal alignment

Question

I'm trying to get various divs to align horizontally, but they keep stacking vertically. What's the best way to fix this? My current code has other elements which aligns the flex box elements in a row, but on re-size they revert to stacking vertically and I've got a hunch it's something to do with the base code here:

CSS

.flex-container
{
    width: 100px;
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: inline-block;
    -webkit-flex-flow: row;
    transition: opacity .2s ease-in-out;
}

.flex-item 
{
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-family: sansa_normal;

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(12px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
}

.flex-item:before 
{
    content: '';
    float: left;
    padding-top: 100%;
}

.dark-box-p
{
    background: #8f6cda;
    transition: opacity .2s ease-in-out;
    opacity: 1;
}

.med-box-p
{
    background: #a68fd8;
    transition: opacity .2s ease-in-out;
    opacity: 1;
}

.light-box-p
{
    background: #b5a5d7;
    transition: opacity .2s ease-in-out;
    opacity: 1;
}

HTML

<div class="contentbox">
<div class="flex-container">
<div class="dark-box-p flex-item">
    <span>TEST</span>
</div>
</div>
</div>

<div class="contentbox">
<div class="flex-container">
<div class="med-box-p flex-item">
    <span>TEST</span>
</div>
</div>
</div>

<div class="contentbox">
<div class="flex-container">
<div class="light-box-p flex-item">
    <span>TEST</span>
</div>
</div>
</div>

Codepen:

https://codepen.io/adms2000/pen/LYVZpey

Thanks!

Answer 1

So you seem to be a bit confused on how flexbox works. Flex should be applied to the parent container, then the inner elements will conform to the flex alignment. Right now you don't have a parent element that all three elements have in common, you're splitting them up into individual containers.

So just remove the additional wrapping tags and have the flex-items inside a single container, then apply flex to that container. You also don't need to have flex-flow if you're doing row that's the default, and float shouldn't be in there.

.flex-container {
  width: 100px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  transition: opacity 0.2s ease-in-out;
}

.flex-item {
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: sansa_normal;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(12px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
  padding: 2rem;
}

.dark-box-p {
  background: #8f6cda;
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
}

.med-box-p {
  background: #a68fd8;
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
}

.light-box-p {
  background: #b5a5d7;
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
}

<div class="contentbox">
  <div class="flex-container">
    <div class="dark-box-p flex-item">
        <span>TEST</span>
    </div>
    <div class="med-box-p flex-item">
        <span>TEST</span>
    </div>
    <div class="light-box-p flex-item">
        <span>TEST</span>
    </div>
  </div>
</div>