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.

#design I wanna implement
enter image description here

#my current output

enter image description here

#html code

 <div class="deal-form-btn-group" fxLayout="row" fxLayoutAlign="start center"   >
              <div  fxLayout="row" fxLayoutAlign="space-evenly center"  >
                <div class="deal-form-btn-group-radio">
                  <div class="pharmacy-checkbox">
                     <div class="deal-text-label">
                       [Subtenant name]
              <div  fxLayout="row" fxLayoutAlign="space-evenly center"  >
                <mat-form-field appearance="fill" class="buyout-form-date-picker">
                  <mat-label>Current Lease Expiration</mat-label>
                    <mat-datepicker-toggle matSuffix [for]="estimatedClosingDate"></mat-datepicker-toggle>
                    <mat-datepicker #estimatedClosingDate></mat-datepicker>

Source: Angular Questions

Categorized as angular, css, flexbox Tagged , ,


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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