CODEWITHSUNDEEP
htmlcssflexbox
Luke Marks
Luke Marks

Reputation: 157

CSS Flex, How to display a list with custom order and horizontall scrolling capabilities

I'm trying to not use Javascript on this. I have a list of boxes with same width but the first child has a different height;

I'm using flex to display the list in a row so I can scroll horizontally between the boxes. But in mobile resolution, I want flex to put the first element on a top row, and the rest on a second row.

I could achive if I set the flex-flow to wrap, but then I loose the scrolling. The closest thing I could find was this, but doesn't have horizontall scroll.

Jsfiddle Demo approach From CSS flex, how to display one item on first line and two on the next line 

.section {
  display:flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.home_box{
  flex: 0 0 auto;
  width:60%;
  height: 300px;
  background-color: #abc;
  margin: 20px;
}

.home_box:first-child{
  height: 600px;
}
<div class="section menu_section_1">
            <div class="home_box box_2"></div> 
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
</div>

Upvotes: 0

Views: 173

Answers (1)

Charu Maheshwari
Charu Maheshwari

Reputation: 1643

Try using the below snippet. You might need to adjust the second section inside div width, but you can check the outer structure and apply media queries to achieve what you want.

.section {
  display: flex;
  flex-flow: row wrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.second-section {
  display: flex;
  flex-flow: row nowrap;
  flex-grow:1;
}

.home_box {
  flex: 0 0 auto;
  width: 60%;
  height: 300px;
  background-color: #abc;
  margin: 20px;
}

.first-section {
  height: 600px;
}

@media (min-width: 576px) {
  .section {
    flex-flow: row nowrap;
  }
}
<div class="section menu_section_1">
  <div class="home_box box_2 first-section"></div>
  <div class="second-section">
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
  </div>
</div>

Upvotes: 1

Related Questions