CODEWITHSUNDEEP
htmlcssflexboxflexboxgrid
anon
anon

Reputation:

How to stack divs using Flexbox Grid?

I'm using the http://flexboxgrid.com framework.

I want the columns to be horizontal on desktop but stack on mobile and responsively.

Example (Desktop):

enter image description here

Example (Mobile):

enter image description here

<div class="row">
    <div class="col-xs">
        <div class="box">1</div>
    </div>
    <div class="col-xs">
        <div class="box">2</div>
    </div>
    <div class="col-xs">
        <div class="box">3</div>
    </div><div class="col-xs">
        <div class="box">4</div>
    </div>
</div>

Here's a JSFiddle that demonstrates what I am saying.

https://jsfiddle.net/RohitTigga/mfv622rt/

How exactly does one stack divs for each column inside the row on a smaller screen or mobile?

Is that not possible with the framework?

Upvotes: 0

Views: 1822

Answers (2)

Juan Slinger
Juan Slinger

Reputation: 21

I know I'm 2 years delay (haha) but the goal is to define the amounts of columns for the resolutions you need. Flexbox is defined using 12 columns, so to achieve your example, you need to do something like this.

<div class="row">
    <div class="col-xs-12 col-lg-3">
        <div class="box">1</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">2</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">3</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">4</div>
    </div>
</div>

Every div that contains the box class is defined to get the 12 columns in the mobile version. But for lg resolutions they get equally 3 columns. To define the resolution you want to use, you can always go to Bootstrap to confirm.

Upvotes: 1

Aaa
Aaa

Reputation: 11

In order to use Flexbox, you need to make your container into a flex container and also set a min-width to the box divs.

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

.box {
  min-width: 40px;
}

https://jsfiddle.net/abstraktion/mfv622rt/3/

Upvotes: 0

Related Questions