CODEWITHSUNDEEP
cssflexbox
Leon Gaban
Leon Gaban

Reputation: 39018

flex-box how to have a static fixed column to the right of multiple flex-rows?

https://codepen.io/leongaban/pen/xrdwRw

Currently the CSS is producing this: enter image description here

What I'm trying to achieve is this, with flex-box still working and without using floats with don't work with flex-containerenter image description here

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;
}

Upvotes: 3

Views: 3276

Answers (2)

Asons
Asons

Reputation: 87191

Make the outer div a flex container (and remove float from .col)

CSS

.flex-outer {
  display: flex;
}

HTML 

<div class="flex-outer">
  ....
</div>

Updated

Based on a comment I updated my answer, cleaned up the code and used proper flex properties.

Also, since prefixed properties weren't set on the flex item rules, I removed them from the flex container rules, as they won't do anything when not set in both places.

Stack snippet

@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>

Upvotes: 4

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

.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>

Upvotes: 1

Related Questions