extends ../../layouts/LayoutComponent
include ../../mixins/utilities/Flex


append variables
  
  -
    var pageHeader = {
      title: 'Flex',
      description: 'Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.',
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/utilities/flex/`,
      linkText: 'Flex on Bootstrap'
    }


append content
  +PageHeader(pageHeader)
  +ComponentCard({
    title: 'Flex Behaviors',
    description: `Apply <code> display </code> 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.`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexBasic

  +ComponentCard({
    title: 'Direction Row',
    description: `Use <code> .flex-row </code> to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexDirection.flex-row
    +FlexDirection.flex-row-reverse
      p.mt-3 
  +ComponentCard({
    title: 'Direction Column',
    description: `Use
      <code> .flex-column </code>
      to set a vertical direction, or
      <code> .flex-column-reverse </code> 
      to start the vertical direction from the opposite side`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexDirection.flex-column
    +FlexDirection.flex-column-reverse

  +ComponentCard({
    title: 'Justify Content',
    description: `justify-content<code>justify-content </code>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 </code>). Choose from start (browser default), <code>end </code>,<code>center </code>,<code>between </code>, or<code>around.</code>`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexJustifyContent

  +ComponentCard({
    title: 'Align items',
    description: `Use <code>align-items </code>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 </code>). Choose from <code>start </code>,<code>end </code>,<code>center </code>,<code>baseline </code>, or <code>stretch (browser default). </code>`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexAlignItem

  +ComponentCard({
    title: 'Align self',
    description: `Use <code>align-self </code>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 </code>). Choose from the same options as <code>align-items: start, </code><code>end </code>,<code>center </code>,<code>baseline </code>, or <code>stretch (browser default).</code>`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexAlignSelf("start").align-self-start
    +FlexAlignSelf("end").align-self-end
    +FlexAlignSelf("center").align-self-center
    +FlexAlignSelf("baseline").align-self-baseline
    +FlexAlignSelf("stretch").align-self-stretch

  +ComponentCard({
    title: 'Fill',
    description: `Use the <code>.flex-fill </code>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.`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexFill

  +ComponentCard({
    title: 'Flex Grow',
    descriptionEl: `<p class='mt-2'>Use <code>.flex-grow-* </code>utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the<code>.flex-grow-1 </code>elements uses all available space it can, while allowing the remaining two flex items their necessary space.</p>`,
    anchor:true,
  }).mb-3
    +FlexGrow

  +ComponentCard({
    title: 'Flex Shrink',
    descriptionEl: `<p class='mt-2'>Use <code>.flex-shrink-*</code> utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with <code>.flex-shrink-1</code> is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with <code>.w-100</code>.</p>`,
    anchor:true,
  }).mb-3
    +FlexShrink

  +ComponentCard({
    title: 'Auto margins',
    description: `Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right ( <code>.me-auto </code>), and pushing two items to the left (<code>.ms-auto </code>).`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexMargin
  
  +ComponentCard({
    title: 'Align items',
    description: `Vertically move one flex item to the top or bottom of a container by mixing 
      <code> align-items </code>,
      <code> flex-direction: column </code>, and 
      <code> margin-top: auto or margin-bottom: auto. </code>`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexWithAlignItems.align-items-start
    +FlexWithAlignItems.align-items-end

  +ComponentCard({
    title: 'Wrap',
    description: `Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with <code>.flex-nowrap </code>, wrapping with<code>.flex-wrap </code>, or reverse wrapping with<code>.flex-wrap-reverse </code>.`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexNoWrap
    +FlexWrap.flex-wrap
    +FlexWrap.flex-wrap-reverse

  +ComponentCard({
    title: 'Order',
    description: `Change the <em>visual</em>order of specific flex items with a handful of <code>order </code>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 </code>takes any integer value (e.g., <code>5 </code>), add custom CSS for any additional values needed.`,
    anchor:true,
    descriptionClass:'mt-2'
  }).mb-3
    +FlexOrder

  +ComponentCard({
    title: 'Aligh content',
    description: `Use <code>align-content </code>utilities on flexbox containers to align flex items<em>together</em>on the cross axis. Choose from <code>start (browser default) </code>,<code>end </code>,<code>center </code>,<code>between </code>,<code>around </code>, or <code>stretch. To demonstrate these utilities, we’ve enforced </code><code>flex-wrap: wrap </code>and increased the number of flex items.`,
    anchor:true,
    descriptionClass:'mt-2'
  })
    +FlexAlignContent.align-content-start
    +FlexAlignContent.align-content-center
    +FlexAlignContent.align-content-end
    +FlexAlignContent.align-content-between
    +FlexAlignContent.align-content-around
    +FlexAlignContent.align-content-stretch