Menu
I'm trying to create a grid-layout like using flex-layout provided by the Angular team.
Here's what I want :
Here's what I have :
I'm trying to do it with only one row that has the wrap parameter, so it's more flexible :
<div class="widgets-row"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="start"
fxLayoutWrap="wrap">
<div class="widget" fxFlex="100%">Large</div>
<div class="widget" fxFlex="50%">Medium</div>
<div class="widget widget-sm" fxFlex="25%">
Small
</div>
<div class="widget widget-sm" fxFlex="25%">
Small
</div>
<div class="widget widget-sm" fxFlex="25%">
Small
</div>
<div class="widget widget-sm" fxFlex="25%">
Small
</div>
Basically I need the last row to wrap below the 2 other "small".
Thanks.
580
Making the grid items responsive is easy using Flexbox. All of our grid-items (columns) are wrapped with one row and one container. Our container CSS sets the total max-width. Using display: flex , our grid-row stretches to the full size of the container.
The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.
Angular Flex-Layout is a stand-alone library developed by the Angular team for designing sophisticated layouts. When creating an HTML page in Angular, using Angular Flex-Layout allows us to easily create FlexBox-based page layouts with a set of directives available for use in your templates.
Unlike Bootstrap, FlexBox has inbuilt in CSS3 and made for better positioning elements. As FlexBox is one dimensional, it makes creating difficult layouts easier. If we want to make all the child elements in a single row of the exact same width, then we have to make a flexbox by defining parent class as display flex.
I managed to do it by creating several layouts, one for large widgets, one for medium ones and a nested one for the small :
<div class="widgets-row"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="start"
fxLayoutWrap="wrap">
<div class="widget" fxFlex="100%">Large</div>
</div>
<div fxLayout
fxLayout.xs="column"
fxLayoutAlign="space-between"
fxLayoutWrap="wrap">
<div fxFlex="49%" class="widget"></div>
<div fxLayout
fxLayout.xs="column"
fxLayoutWrap="wrap"
fxLayoutAlign="space-around"
fxFlex="49%">
<div class="widget-sm" fxFlex="49%">Small</div>
<div class="widget-sm" fxFlex="49%">Small</div>
<div class="widget-sm" fxFlex="49%">Small</div>
<div class="widget-sm" fxFlex="49%">Small</div>
</div>
</div>
PS : The 49% Flex in the second layout is in order to have some space between the widgets so they're not sticked together.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With