Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Collapse flexbox column on mobile

Tags:

I've got two columns (using flexbox) and a media query breakpoint. However I've tried the following css attributes to get the columns to be 100% and stack on top of each other when on mobile.

Currently remains as a column, side by side at all times.

width: 100%;
flex-grow: 1;

Code for the container

.flexbox-container {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

The code for the columns

.flexbox-column {
  display: flex;
    width: 100%;
    padding: 50px;
  background-color: yellow;
}

@media (min-width: 768px) {
  .flexbox-column {
    width: 50%;
    background-color: #444;
  }
}

My codepen (I don't know how to get the 'Run Code' feature to work on here) https://codepen.io/jordanc26/pen/yjWZQJ

like image 241
wharfdale Avatar asked May 25 '18 09:05

wharfdale


People also ask

How do you divide two columns into flex?

Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.

What is Flex shrink?

The flex-shrink property specifies how much the item will shrink compared to others item inside that container. It defines the ability of an element to shrink in compared to the other elements which are placed inside the same container.


1 Answers

Moving this rule

  .flexbox-container {
     display: flex;
  }

into the mediaquery scope is enough:
in fact, for narrow viewports, both your column elements are not in a flexbox container anymore, so they will stack on top of each other and they will extend for the entire available width

codepen demo

like image 147
Fabrizio Calderan Avatar answered Sep 20 '22 12:09

Fabrizio Calderan