How to implement dynamic flex value with Angular Material

angular flex-layout
angular flex layout vs bootstrap
angular material card flex-layout
angular dynamic fxflex
angular material responsive grid
dynamic layout angular
angular/flex-layout wrap
angular responsive

I'm trying to build a div with uncertain number of child divs, I want the child div have flex="100" when there is only one of them, which takes the entire row. If there are more than one child divs (even if there are three or four child elements), they should all have exactly flex="50", which will take half of the row.

Any idea how could I do that? Thanks in advance.

Another way is <div flex="{{::flexSize}}"></div> and in controller define and modify flexSize e.g $scope.flexSize = 50;

How to make flex value dynamic with Angular Material?, angular-material. I'm trying to implement a <div> with number of child <div> having dynamic flex value as per the number of child <div> . share. Share a link to  Install the package with npm/yarn after creating a project with Angular CLI. Flex-Layout depends on Component DevKit (CDK), so you need additional installation if you haven’t installed it. $ yarn add @angular/flex-layout @angular/cdk. And add FlexLayoutModule into your AppModule.

Thanks for the help from @William S, I shouldn't work with flex box for a static size layout.

So I work with ng-class to solve my problem.


<div flex layout-fill layout="column" layout-wrap>
    <div ng-repeat="function in functions" ng-class="test" class="card-container">

My CSS is like the following:

.test1 {
  width: 100%;

.test2 {
  width: 50%;

The initial value of $scope.test is 'test1',by changing the value from 'test1' to 'test2', the width of children divs will be set to 50%.

Layout > Layout Children, Add the flex directive to a layout's child element and the element will flex (grow or A layout child's flex directrive can be given an integer value from 0-100. regardless of your choice of flex-order . or if you use a flex-direction: reverse . Flex Layout stands on its own, and it can also be used in combination with Angular Material for Material Design components. Installing. Install Flex Layout from npm: $ npm install @angular/flex-layout --save Or with Yarn: $ yarn add @angular/flex-layout Now import FlexLayoutModule in your app module:

Defining "flex" inside an element will always try to take up the most amount of space that the parent allows, without supplying any parameters to flex. This needs to be accompanied by layout="row/column", so flex expands in the right direction.

Is this what you're looking for?

Note that eventually, the items will start growing outside the parent size. You can solve this in several ways, but I believe this is outside the scope of the question.


<div ng-app="MyApp" ng-controller="AppCtrl as ctrl">
  <h2>Static height list with Flex</h2>
  <md-button class="thebutton" ng-click="addItem()">Add Item</md-button>
  <div class="page" layout="row">
    <md-list layout-fill layout="column">
      <md-list-item flex layout="column" class="listitem" ng-repeat="item in items" ng-click="logme('Unrelated action')">
        <md-item-content layout="column" md-ink-ripple flex>
          <div class="inset">


.page {
  height: 300px; /* Or whatever */

.thebutton {
  background-color: gray;

.listitem {
  /*height: 100px;*/
  background-color: pink;


angular.module('MyApp', ['ngMaterial'])
  .controller('AppCtrl', function($scope) {
    $scope.items = [{
      title: 'Item One',
      active: true
    } ];

    $scope.addItem = function() {
      newitem = {
      title: 'Another item',
      active: false


    $scope.toggle = function(item) { = !;
      console.log("bool toggled");

    $scope.logme = function(text) {

Layout > Introduction, Using HTML Directives as the API provides an easy way to set a value (eg. layout​="row" ) and helps with separation of And if we use Breakpoints as specified in Material Design: We can <div layout="column" class="zero"> <div flex="33" flex​-md="{{ vm. Layout directives dynamically generate class selectors at runtime. Angular Flex Layout is a stand-alone library developed by the Angular Team for designing sophisticated layouts. If you have used Bootstrap before, this provides only the Layout (Grid) Component only. This means that you can use it in combination with other UI frameworks not just Angular 2 Material.

Use below :

scope.flexSize = === 'FR'? 40: 50;

<div flex="{{::flexSize}}">

Flex Layout for Angular, Flex Layout is a component engine for Flexbox layouts in Angular. Learn how to use it to easily create your page layouts. it can also be used in combination with Angular Material for Material Design components. Its value defaults to row, so we don't need to provide any value for the default behavior. Quick start with Angular Material and Flex-Layout. To design your Angular application, it is possible to use multiple CSS libraries, but Angular Material is specially designed for Angular projects and easy to implement. With mat elements, you can make a nice interface in a very short amount of time.

how use expressions for flex value · Issue #4959 · angular/material , i would like to use an expression in my table div flex values within a nested ng-​repeat {{row[]. in your code you are binding object to [value] so it can't bind it right, if you change your value to string like you did in gender section will be OK, for e.g: changing [value] from education that is object to education.educationLevelName that is a string and now it works correctly.

Angular Flex-Layout: Flexbox and Grid Layout for Angular Component, This article explains how to use the Angular Flex-Layout module to build flexbox layout in Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. Each child element has new and directives to configure the card Loading Components Dynamically in Angular. Introduction to the Angular Material Data Table. The Material Data Table component is a generic component for displaying tabulated data. Although we can easily give it a Material Design look and feel, this is actually not mandatory. In fact, we can give the Angular Material Data table an alternative UI design if needed.

Angular Flex Layout: The Masquerade - Angular In Depth, In this post I'll summarize the possibilities of flexbox and how Angular Flex Layout enrich and Flex Layout is an Angular library that allows you to apply FlexBox directly in the HTML, Sets the flex grow, shrink and basis values of the item. 960px and 1279px, we would just add the 'md' breakpoint to the directive like this: Material Design components for Angular. Sprint from Zero to App. Hit the ground running with comprehensive, modern UI components that work across the web, mobile, and desktop. Fast and Consistent. Finely tuned performance, because every millisecond counts. Fully tested across modern browsers. Themeable, for when you need to stay on brand or

  • how are you managing controls in your Divs when the width is changed? For example upon flex=50 size of the controls should be reduced as compared to flex=100.
  • Thanks William, but this is not what I'm looking for. I need the child elements exactly have flex="50" when there are more than one children(ie: 2, 3, 4, 5....). Your code will make flex="33" for each children when there are three of them; flex="25" for each children when there are four of them, etc. Sorry for the confusion, I have updated my question.
  • @Dong In that case I suggest you work with position: absolute instead, alternatively define px sizing for your item elements while still in position: relative. The very purpose of flexbox is to adjust itself based on its parent, not force a static size and overflow whatever is left.
  • Thank you for your help, @William S.