FxFrameWork

Created by striky

Layout / Layout-align

Layout direction with combination of alignment.

1
2
3
4
5
<div class="fx-layout fx-layout--row fx-layout-align fx-layout-align--start-stretch">
Layout Direction
Alignment in Layout Direction (horizontal)





Alignment in Perpendicular Direction (vertical)



All Available classes:

Layout

  • .fx-layout
  • .fx-layout--row
  • .fx-layout--column
  • .fx-layout--wrap
  • .fx-layout--wrap-reverse
  • .fx-layout--no-wrap

Layout alignment

  • .fx-layout-align
  • .fx-layout-align--none-none
  • .fx-layout-align--start-none
  • .fx-layout-align--center-none
  • .fx-layout-align--end-none
  • .fx-layout-align--space-around-none
  • .fx-layout-align--space-between-none
  • .fx-layout-align--space-evenly-none
  • .fx-layout-align--none-start
  • .fx-layout-align--start-start
  • .fx-layout-align--center-start
  • .fx-layout-align--end-start
  • .fx-layout-align--space-around-start
  • .fx-layout-align--space-between-start
  • .fx-layout-align--space-evenly-start
  • .fx-layout-align--none-center
  • .fx-layout-align--start-center
  • .fx-layout-align--center-center
  • .fx-layout-align--end-center
  • .fx-layout-align--space-around-center
  • .fx-layout-align--space-between-center
  • .fx-layout-align--space-evenly-center
  • .fx-layout-align--none-end
  • .fx-layout-align--start-end
  • .fx-layout-align--center-end
  • .fx-layout-align--end-end
  • .fx-layout-align--space-around-end
  • .fx-layout-align--space-between-end
  • .fx-layout-align--space-evenly-end
  • .fx-layout-align--none-stretch
  • .fx-layout-align--start-stretch
  • .fx-layout-align--center-stretch
  • .fx-layout-align--end-stretch
  • .fx-layout-align--space-around-stretch
  • .fx-layout-align--space-between-stretch
  • .fx-layout-align--space-evenly-stretch

Fill Layout

Use .fx-fill when you need fill available width/height of parent container.

Note: Use it with .fx-layout class!

1
2
<div class="fx-layout fx-layout--column fx-fill">
    <div class="fx-layout fx-flex">
        <div class="c-example__item fx-flex--20">1</div>
        <div class="c-example__item fx-flex--80">2</div>
    </div>
</div>

All Available classes:

  • .fx-fill

'Flex' to fill row layout

If you need fill remain space in row, you can simple use fx-flex.
For common dividing of elements, there are pre-generated classes respecting max-width from 0% up to 100% by +5 steps.

Note: Use it with .fx-layout or fx-layout--row class!

1
2
3
<div class="fx-layout">
    <div class="fx-flex--20">1</div>
    <div class="fx-flex--70">2</div>
    <div class="fx-flex">3</div>
</div>

All Available classes:

  • .fx-flex
  • .fx-flex--0
  • .fx-flex--5
  • .fx-flex--10
  •  ...
  • .fx-flex--95
  • .fx-flex--100
  • .fx-flex--none
  • .fx-flex--no-grow
  • .fx-flex--grow
  • .fx-flex--initial
  • .fx-flex--auto
  • .fx-flex--no-shrink

Flex Offset

For common offsets of elements, there are pre-generated classes respecting margin-left from 5% up to 100% by +5 steps.

Note: Use it with .fx-layout or fx-layout--row class!

1
2
<div class="fx-layout">
    <div class="fx-flex--70 fx-flex--offset-10">1</div>
    <div class="fx-flex">2</div>
</div>

All Available classes:

  • .fx-flex--offset-5
  • .fx-flex--offset-10
  • .fx-flex--offset-15
  •  ...
  • .fx-flex--offset-95
  • .fx-flex--offset-100

Self Align

Use it for self align of flex-items.

Note: Click on third element for change alignment of that single element.

1
2
3
4
5
<div class="fx-layout fx-layout--row fx-layout-align fx-layout-align--space-around-center">
    <div>1</div>
    <div>2</div>
    <div class="fx-flex-align--center">3</div>
    <div>4</div>
    <div>5</div>
</div>

All Available classes:

  • .fx-flex-align
  • .fx-flex-align--start
  • .fx-flex-align--center
  • .fx-flex-align--baseline
  • .fx-flex-align--end
  • .fx-flex-align--stretch

Responsive

Each provided classes below has breakpoint modifier for each defined breakpoint.

Note: Try to resize wrap container to see changes.

<div class="fx-layout fx-layout--column fx-layout--row@sm
            fx-layout-align fx-layout-align--space-between-stretch fx-layout-align--space-around-center@sm">
    <div class="fx-layout@xs fx-layout-align@xs fx-layout-align--center-center@xs">1</div>
    <div class="">2</div>
    <div class="fx-flex-align--end@sm">3</div>
    <div class="">4</div>
    <div class="">5</div>
</div>

All Available suffixes:

  • .fx-layout@yourBreakpoint
  • .fx-layout@lt-yourBreakpoint
  • .fx-layout@gt-yourBreakpoint
  •  
  • Example:
  •  
  • .fx-layout@sm
  • .fx-layout@lt-sm
  • .fx-layout@gt-sm

Default available breakpoints:

  • xs (0 - 599px)
  • sm (600px - 959px)
  • md (960px - 1279px)
  • lg (1280px - 1920px)
  • xl (> 1920px)

Responsive suffixes:

Greater than:

  • gt-xs (>= 600px)
  • gt-sm (>= 960px)
  • gt-md (>= 1280px)
  • gt-lg (>= 1920px)

Lower than:

  • lt-sm (< 600px)
  • lt-md (< 960px)
  • lt-lg (< 1280px)
  • lt-xl (< 1920px)