CODEWITHSUNDEEP
htmlcssflexbox
Dan Zawadzki
Dan Zawadzki

Reputation: 732

Items order in flexbox container

I'm trying to build media query, which will be working like on the sketch. Any suggestion?enter image description here

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: lightblue;
  width: 100%;
  padding: .5rem;
  box-sizing: border-box;
}

.name {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 40px
}

.options {
  display: flex;
  flex-direction: row;
}

.option {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 80px;
}

.action {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
}

@media (max-width: 350px){
  .name     {order: 1}  
  .action   {order: 2}
  .options  {order: 3}

  .container {
    flex-direction: column;
    flex-wrap: wrap;
  }
}
  <div class="container">
    <div class="name">Lorem ipsum</div>
    <div class="options">
      <div class="option">2</div>
      <div class="option">3</div>
      <div class="option">4</div>
    </div>
    <div class="action">
      5
    </div>
  </div>

I have already started, but I'm not really satisfied :). I need something more stable, as I will want to use it here later.

https://codepen.io/danzawadzki/pen/mwPYMz

At this moment I'm changing order and flex-direction in media query, but it's not good enough. Box number 1 will contain name of the segment, so it should have fixed width. There will be multiple items like that in one column, so I would prefer to keep it looks clean with same proportions.

Upvotes: 1

Views: 105

Answers (2)

Asons
Asons

Reputation: 87191

If you change your @media and remove flex-direction: column and add flex-basis: 100% to the option, it will flow as your image shows

@media (max-width: 350px){
  .options  {
    order: 1; flex-basis: 100%;
  }
  .container {
    flex-wrap: wrap;
  }
}

Note, I also removed the .name and .action rules, as they are not necessary

Fiddle demo

Stack snippet

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: lightblue;
  width: 100%;
  padding: .5rem;
  box-sizing: border-box;
}

.name {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 40px
}

.options {
  display: flex;
  flex-direction: row;
}

.option {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 80px;
}

.action {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
}

@media (max-width: 350px){
  .options  {
    order: 1; flex-basis: 100%;
  }
  .container {
    flex-wrap: wrap;
  }
}
<div class="container">
    <div class="name">Lorem ipsum</div>
    <div class="options">
      <div class="option">2</div>
      <div class="option">3</div>
      <div class="option">4</div>
    </div>
    <div class="action">
      5
    </div>
  </div>

Updated

By setting .options { flex-grow: 1; } and .option { flex: 1 1 80px; }, you can have the options/option elements to fill the remaining space on wider screens

Fiddle demo 2

Stack snippet 2

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: lightblue;
  width: 100%;
  padding: .5rem;
  box-sizing: border-box;
}

.name {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 40px
}

.options {
  flex-grow: 1;
  display: flex;
}

.option {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex: 1 1 80px;
}

.action {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
}

@media (max-width: 350px){
  .options  {
    order: 1; flex-basis: 100%;
  }
  .container {
    flex-wrap: wrap;
  }
}
<div class="container">
    <div class="name">Lorem ipsum</div>
    <div class="options">
      <div class="option">2</div>
      <div class="option">3</div>
      <div class="option">4</div>
    </div>
    <div class="action">
      5
    </div>
  </div>

Upvotes: 0

LKG
LKG

Reputation: 4192

Use this may be it will work for you

@media (max-width: 350px){
  .options  {order: 3; flex:0 0 100%;}
  .container {
    flex-wrap: wrap;
  }
}

Upvotes: 1

Related Questions