mixin FlexBasic
  .d-flex.p-2.bg-200.mb-2 Flexbox container!
  .d-inline-flex.p-2.bg-200 Inline flexbox container!

mixin FlexBehaviorsDescription
  p&attributes(attributes) Apply 
    code display  
    |  utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

mixin FlexDirectionDescription
  p&attributes(attributes) Use
    code .flex-row 
    | to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

mixin FlexJustifyContentDescription
  p&attributes(attributes) Use 
    code justify-content 
    | utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if 
    code flex-direction: column  
    | ). Choose from start (browser default), 
    code end 
    | ,
    code center 
    | ,
    code between 
    | , or
    code around. 

mixin FlexDirection
  .d-flex.bg-200.mb-3&attributes(attributes)
    .p-2.bg-300.border.border-400 Flex item 1
    .p-2.bg-300.border.border-400 Flex item 2
    .p-2.bg-300.border.border-400 Flex item 3

mixin FlexJustifyContent
  .d-flex.justify-content-start.bg-200.mb-2
    .p-2.bg-300.border.border-400 Flex Item
  .d-flex.justify-content-end.bg-200.mb-2
    .p-2.bg-300.border.border-400 Flex Item
  .d-flex.justify-content-center.bg-200.mb-2
    .p-2.bg-300.border.border-400 Flex Item
  .d-flex.justify-content-between.bg-200.mb-2
    .p-2.bg-300.border.border-400 Flex Item
  .d-flex.justify-content-around.bg-200.mb-2
    .p-2.bg-300.border.border-400 Flex Item

mixin FlexAlignItemDescription
  p&attributes(attributes) Use 
    code align-items  
    | utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if 
    code flex-direction: column 
    | ). Choose from 
    code start  
    | ,
    code end 
    | ,
    code center 
    | ,
    code baseline 
    | , or 
    code stretch (browser default). 

mixin FlexAlignItem
  .d-flex.align-items-start.bg-200.mb-2(style="height: 5rem;")
    .p-2.bg-300.border.border-400 Flex item
  .d-flex.align-items-end.bg-200.mb-2(style="height: 5rem;")
    .p-2.bg-300.border.border-400 Flex item
  .d-flex.align-items-center.bg-200.mb-2(style="height: 5rem;")
    .p-2.bg-300.border.border-400 Flex item
  .d-flex.align-items-baseline.bg-200.mb-2(style="height: 5rem;")
    .p-2.bg-300.border.border-400 Flex item
  .d-flex.align-items-stretch.bg-200.mb-2(style="height: 5rem;")
    .p-2.bg-300.border.border-400 Flex item

mixin FlexAlignSelfDescription
  p&attributes(attributes) Use 
    code align-self  
    | utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if 
    code flex-direction: column 
    | ). Choose from the same options as 
    code align-items: start, 
    code end 
    | ,
    code center 
    | ,
    code baseline 
    | , or 
    code stretch (browser default). 

mixin FlexAlignSelf(config)
  .d-flex.bg-200.mb-2(style="height: 5rem;")
    .border.border-400.p-2.bg-300 Flex Item
    .border.border-400&attributes(attributes).p-2.bg-300 Align self #{config}
    .border.border-400.p-2.bg-300 Flex Item

mixin FlexFillDescription
  p&attributes(attributes) Use the
    code .flex-fill 
    | class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

mixin FlexFill
  .d-flex.bg-200
    .p-2.flex-fill.bg-300.border.border-400 Flex item with a lot of content
    .p-2.flex-fill.bg-300.border.border-400 Flex item
    .p-2.flex-fill.bg-300.border.border-400 Flex item

mixin FlexShrink
  .d-flex.bg-200
    .p-2.w-100.bg-300.border.border-400 Flex item
    .p-2.flex-shrink-1.bg-300.border.border-400 Flex item

mixin FlexGrow
  .d-flex.bg-200
    .p-2.flex-grow-1.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Third flex item


mixin FlexMargin
  .d-flex.bg-200.mb-2
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
  .d-flex.bg-200.mb-2
    .me-auto.p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
  .d-flex.bg-200.mb-2
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .ms-auto.p-2.bg-300.border.border-400 Flex item

mixin FlexAlignItemDescription
  h5(data-anchor) With align items
  p&attributes(attributes) Vertically move one flex item to the top or bottom of a container by mixing 
    code align-items 
    | ,
    code flex-direction: column 
    | , and 
    code margin-top: auto or margin-bottom: auto. 

mixin FlexWithAlignItems
  .d-flex&attributes(attributes).flex-column.bg-200.mb-3(style='height: 200px;')
    .mb-auto.p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item

mixin FlexWrapDescription
  p&attributes(attributes) Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with
    code .flex-nowrap 
    | , wrapping with
    code .flex-wrap 
    | , or reverse wrapping with
    code .flex-wrap-reverse 
    | .
mixin FlexNoWrap
  .d-flex.flex-nowrap.mb-3.bg-200.border.border-300.py-3(style="width: 8rem")
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item

mixin FlexWrap
  .d-flex&attributes(attributes).mb-3.bg-200.border.border-300
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item

mixin FlexOrderDescription
  p&attributes(attributes) Change the
    em visual
    | order of specific flex items with a handful of 
    code order 
    | utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As 
    code order 
    | takes any integer value (e.g., 
    code 5 
    | ), add custom CSS for any additional values needed.

mixin FlexOrder
  .d-flex.flex-nowrap.bg-200
    .order-3.p-2.bg-300.border.border-400 First flex item
    .order-2.p-2.bg-300.border.border-400 Second flex item
    .order-1.p-2.bg-300.border.border-400 Third flex item

mixin FlexAlignContentDescription
  p&attributes(attributes) Use 
    code align-content 
    | utilities on flexbox containers to align flex items
    em together
    | on the cross axis. Choose from 
    code start (browser default) 
    | ,
    code end 
    | ,
    code center 
    | ,
    code between 
    | ,
    code around 
    | , or 
    code stretch. To demonstrate these utilities, we’ve enforced 
    code flex-wrap: wrap 
    | and increased the number of flex items.

mixin FlexAlignContent
  .d-flex&attributes(attributes).flex-wrap.bg-200.mb-3(style='height: 300px;')
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item
    .p-2.bg-300.border.border-400 Flex item