CODEWITHSUNDEEP
twitter-bootstrapcssflexbox
micronyks
micronyks

Reputation: 55443

flex with bootstrap - stack issue when resizing

I use flex as below and kinda new to flex world,

.couple-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

and other size in HTML, I use bootstrap grid system as shown below,

  <div class="col-xs-12 couple-container">
    <div class="col-sm-3 couple nikhilpic">
          div1
    </div>
    <div class="col-sm-2 couple-info">
        div2
        </div>
       <div class="col-sm-1 heart">
        div3 
        </div>

    <div class="col-sm-2 couple-info">
        div4
        </div>
    <div class="col-sm-3 couple vidyapic">
           div5
    </div>
</div>

https://plnkr.co/edit/lGfsixyzoZnKX9qlY5VN?p=preview

Above code gives me what I want in desktop view. eg. items are centrally aligned, contents are space-between.

Problem: when I shrink the size (tablet or mobile screen), I want, using flex, to get stack view(one above another) but unfortunately I don't get desire output.

This is what I want to achieve using mobile screen by just removing below lines,

https://plnkr.co/edit/bcEbslGtOrTRH6AyGYsb?p=preview

display: flex;
align-items: center;
justify-content: space-between;

but look at the desktop screen everything is messed.

Upvotes: 3

Views: 1253

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371003

An initial setting of a flex container is flex-wrap: nowrap. This means that flex items are forced to stay in a single line. If you want flex items to wrap, you need to give the container flex-wrap: wrap.

However, when dealing with percentage lengths, a flex item may just shrink and not wrap. Or the wrapping may occur in an undesirable fashion. This seems to be the case in your layout.

Another option is to switch your layout from row-direction for desktop, to column-direction for mobile/tablet. Something like this:

@media ( max-width: 800px ) {
  .couple-container { flex-direction: column; align-items: stretch; }
}

revised plunkr

Upvotes: 2

Related Questions