Questions tagged flexbox

Explore the latest questions and answers asked by our top developers.

flexbox column alignment issue – how to center align items without gaps, if flex has 1 or two items?

Facing flexbox column alignment issue. Don’t know how to fix it by myself. so gone through below SO threads, but unfortunately nothing works for me. Solution 1 Solution 2 Currently using Angular 11x version for development. I’ve created REUSEABLE table component using Angular material, which is working fine. Here the problem is, am showing action […]

By jade
Published
Categorized as angular, css, flexbox Tagged , ,

Angular flex layout: Parent element with fxLayout="column" affects height not width of child element

I have a parent element that applies fxLayout="column". Inside the parent element I have a child element that applies fxFlex="80". In this case, fxFlex="80" affects the height of the child element not the width. I get the expected result when changing the parent flex-layout to row. How can I achieve the expected results with fxLayout="column" […]

By Teebo
Published
Categorized as angular, css, flexbox Tagged , ,

How to get flex-grow to work with *ngFor in Angular 10

I have a list of images that I want to display justified by width. When I add a hardcoded list of images everything looks great, and the images cover the whole width of the container (see styles and code below): <div class="flex-container"> <img src="https://picsum.photos/1800/1600" class="flex-item" [style.flex]="getFlexStyle(0)"/> <img src="https://picsum.photos/180/180" class="flex-item" [style.flex]="getFlexStyle(1)"/> <img src="https://picsum.photos/1202/722" class="flex-item" [style.flex]="getFlexStyle(2)"/> <img […]

By Shoom Kloom
Published
Categorized as angular, css, flexbox Tagged , ,

Can I use Angular Flex-layout library for simple proyect?

I’m building a simple project with html, scss and javascript, i’m using Gulp.js as well. I was wondering if it would be possible and a good practice to use the Angular Flex layout library in the proyect. Note: I need to finish it very quickly while maintaining a responsive layout and I thought using the […]

Can I use Angular Flex-layout library for simple project?

I’m building a simple project with html, scss and javascript, i’m using Gulp.js as well. I was wondering if it would be possible and a good practice to use the Angular Flex layout library in the proyect. Note: I need to finish it very quickly while maintaining a responsive layout and I thought using the […]

Angular Material button alignment

sorry I am very basic in CSS, I am trying to align button to right but not able to do it. below is my code. <mat-card-header> <mat-card-title> {{rosterDetails.dutyDate}} ({{rosterDetails.dutyTime}}) </mat-card-title> <button mat-icon-button (click)="goBack()"> <mat-icon>arrow_back</mat-icon> </button> </mat-card-header> i am using angular material. Source: Angular Material Quesions

By Developerzzz
Published
Categorized as angular-material, css, flexbox, html Tagged , , ,

flex layout columns 2 columns to take half the available space each

I want both 2 columns to take half the available space each But the text should be aligned to the left? same with the screenshot below enter image description here #stackblitz code https://stackblitz.com/edit/angular-r13bnn?file=src%2Fapp%2Fapp.component.html Source: Angular Questions

By Chritoffer Clitch
Published
Categorized as angular, css, flexbox Tagged , ,

flex layout column implementation

How to correctly use flex layout to implement the ff design , I tried using fxLayout="row" fxLayoutAlign="space-evenly center" but as you can see on the current output the [Subtenant name] and Current lease Expiration should have the same distance with the design but on my current output it is not. Anyone has any idea? Thanks. […]

By Chritoffer Clitch
Published
Categorized as angular, css, flexbox Tagged , ,

flex layout column implementation , create two columns

How to correctly use flex layout to implement the ff design , I tried using fxLayout="row" fxLayoutAlign="space-evenly center" but as you can see on the current output the [Subtenant name] and Current lease Expiration should have the same distance with the design but on my current output it is not. Anyone has any idea? Thanks. […]

By Chritoffer Clitch
Published
Categorized as angular, css, flexbox Tagged , ,

Issue with Angular flex

Got a basic flexbox grid like this, If I move the ngFor loop into a component the flex is broken. The on the DOM cause the issue. I would like to remove it and keep only the content of the component . :host {} is not the solution because the still exist… Any idea? .grid […]

By freijay
Published
Categorized as angular, css, flexbox Tagged , ,
1 2 3 13

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq