Flex Layout not following flex percentages

» html » Flex Layout not following flex percentages

By : user3100196

Date : January 12 2021, 01:40 AM

around this issue I am trying out flex layout in my angular app. I am trying to create a layout with base as :

code :

    <div fxLayout="column" fxLayoutAlign="start space-between" fxLayoutGap="10px">
        <div class="first_bar">
          Second Div
        </div>
      <div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="10px">
        <div fxFlex="12" class="second_bar">
          Side
        </div>
        <div fxFlex="88" fxLayout="column"  fxLayoutAlign="space-bewteen" fxLayoutGap="10px">
          <div [ngClass]="['third_bar_1']">
          first
          </div>
          <div [ngClass]="['third_bar_2']">
          second
          <div>
        </div>
      </div>
   </div>

.first_bar{
        background-color: #cdf7fb;
        height: 100px;
    }

    .second_bar{
        background-color: #cdf7;
        height: calc(100vh - 200px);  
    }

    .third_bar_1{
        background-color: #6390c3;
        height: 100px;
    }

    .third_bar_2{   
        border:1px solid red;
        height: calc(100vh - 315px);
    }

Share :

Is there a way(formula) to calculate absolute size of flex elements described with flex-grow, flex-shrink and flex basis

By : daried

Date : March 29 2020, 07:55 AM

it helps some times The closest thing to a formula is just the algorithm in the spec:
http://www.w3.org/TR/css3-flexbox/#resolve-flexible-lengths

Can someone explain how flex-ratio works with iron-flex-layout?

By : Suran Kalana

Date : March 29 2020, 07:55 AM

like below fixes the issue The docs demo apparently has a bug, but the explanatory text before that is correct. To use the flex factors (i.e., flex-2, flex-3, etc), make sure to include the iron-flex-factors style module in your component's style like this:

code :

<dom-module id="x-foo">
  <template>
    <style include="iron-flex-factors"></style>
    ...

<dom-module id="x-foo">
  <template>
    <style include="iron-flex-factors iron-flex"></style>
    ...

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
});

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style include="iron-flex iron-flex-factors">
        div {
          border: solid 1px blue;
        }
      </style>

      <div class="horizontal layout">
        <div class="flex-3"><p>flex-3</p></div>
        <div class="flex"><p>flex</p></div>
        <div class="flex-2"><p>flex-2</p></div>
      </div>
    </template>
  </dom-module>
</body>

html flex components not combining in a flex: 1 0 auto layout

By : MacSupport.com

Date : March 29 2020, 07:55 AM

help you fix your problem Please simplify the example (remove custom tags for example). I get only roughly what you are trying to achieve, but a few things first:
What grows and shrinks is flex item, not flex container. And an element only becomes a flex item when its immediate parent is a flex container. Your div with bg-pink-300 is not a flex item because its immediate parent is just a row It appears that you want to use flexbox to make your div automatically fill the available vertical space. But all your flex containers are horizontal containers, hence vertically you are really just relying on the percentage height.

As a absolutely-positioned child of a flex container does not participate in flex layout, how to center an element?

By : user1533237

Date : March 29 2020, 07:55 AM

I hope this helps you .
For a positioned box (that is, one with any position other than static), the z-index property specifies: 1)The stack level of the box in the current stacking context. 2)Whether the box establishes a local stacking context.

Flex page-layout not working in IE11 - flex grow not playing nice

By : existenza

Date : March 29 2020, 07:55 AM

I hope this helps . I'm trying to set up a simple page layout using flex but cannot seem to get it to work in IE11. The main component refuses to grow to fill the space like it does in Chrome or Safari. I've read everything I can find about flex-grow on IE but to no avail. , You need to give,

code :