[Solved] How can I make Flex:1 for mobile devices responsive?

by


you can use media queries to achieve this. Here, if screen is larger than 500px, then categories will be displayed as block and so each is 100% width.

.category-main-layout {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.category {
  flex-grow: 1;
  text-align: center;
  border: 1px red solid;
}

@media screen and (max-width: 500px) {
  .category-main-layout {
    display: block;
  }
}
<div class="category-main-layout">
  <div class="category">
    CONTENT
  </div>
  <div class="category">
    CONTENT
  </div>
  <div class="category">
    CONTENT
  </div>
</div>

0

solved How can I make Flex:1 for mobile devices responsive?