Angular Flex Layout: Responsive layout combining row and column

Question

Im learning flex-layout, and I'm trying to create a responsive UI. I have years of experience with bootstrap grid system, but I can't seem to understand how to accomplish the following (live demo):

On large monitors:

On medium monitors:

On mobile:

If I understand it correctly, I have to use a combination of rows and columns, like the below code

    <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
   </div>

On small screen, the layout changes from row to column, meaning I have implemented the UI examples above for large and mobile monitors.

Question: How can I implement the UI for medium monitors (see above picture)? I cant understand how to combine row and column

Answer 1

I would minimize your code by looping over the array of items. And I changed the transition from md to sm instead of going to straight to xs, but its your preference. I am subtracting layout gap as well (-0.5%).

<div class="container" fxLayout="row" fxLayout.sm="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
 <ng-container *ngFor="let item of items">
    <li
      fxFlex="0 1 calc(25% - 0.5%)"
      fxFlex.lt-md="0 1 calc(50% - 0.5%)"
      fxFlex.lt-sm="100%">
   </li>
</ng-container>
   </div>

Answer 2

You can try that way:

    .container { // for desktop & tablet
        display: flex;
        flex-flow: row wrap;
    }
    
    .container div {
        width: 25%
    }
    
    @media for middle { // for tablet (mid)
        .container div {
            width: 50%
        }
    }
    
    @media for mobile { //for mobile
        .container {
            flex-direction: column;
        }
    
        .container div {
            width: 100%
        }
    }

Hope it will help, sorry for not so detail, but it's just a fast tip with flex.

Thanks