Flex box how to have a static fixed column to the right of multiple flex rows?
https://codepen.io/leongaban/pen/xrdwRw
What I'm trying to achieve is that flexbox still works and doesn't use floats without flexbox working
Markup
<div>
<div class="dashboard">
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
</div>
<div class="col">
</div>
</div>
CSS
@import "compass/css3";
// .dashboard { float: left; }
.col {
float: right;
width: 300px;
height: 600px;
background: orange;
}
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
+3
source to share
2 answers
Make the outer div a flex container (and remove float
from .col
)
CSS
.flex-outer {
display: flex;
}
Html
<div class="flex-outer">
....
</div>
Update
Based on the comment, I updated my answer, cleaned up the code and used the correct flex properties.
Also, since the prefix properties were not set in the flex item rules, I removed them from the flex container rules, as they won't do anything unless they are set in both places.
Fragment of the stack
@import "compass/css3";
.flex-outer {
display: flex;
}
.dashboard {
flex-grow: 1;
}
.col {
margin-left: 25px;
flex-basis: 300px;
background: orange;
}
.flex-container {
display: flex;
justify-content: space-around;
}
.flex-item {
flex: 1 1 200px;
background: tomato;
padding: 5px;
height: 150px;
margin-top: 10px;
color: white;
font-weight: bold;
font-size: 3em;
display: flex;
justify-content: center;
align-items: center;
}
<div class="flex-outer">
<div class="dashboard">
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
</div>
<div class="col">
</div>
</div>
+3
source to share
.wrapper {
display: flex;
}
.dashboard {
flex: 1 0;
}
.col {
flex: 0 0 300px;
height: 600px;
background: orange;
}
.flex-container {
display: flex;
justify-content: space-around;
flex-wrap: nowrap;
}
.flex-item {
background: tomato;
padding: 5px;
flex: 1 0;
max-width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="wrapper">
<div class="dashboard">
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
</div>
<div class="col">
</div>
</div>
+1
source to share