This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0

Layout.Flex

Functions for creating flexible box layouts.

Options

Containers

type Wrap = Forward | Reverse

Specifies the wrapping of the items in a container.

alignContent : Align -> Rule

Specifies the alignment of the lines of items in a container along the cross axis.

alignItems : Align -> Rule

Specifies the alignment of the items in a container along the cross axis.

justifyContent : Align -> Rule

Specifies the alignment of the items in a container along the main axis.

wrap : Maybe Wrap -> Rule

Specifies the wrapping of the items in a container.

Items

type Basis = Auto | Size String

Specifies the size of an item before remaining space is distributed.

alignSelf : Align -> Rule

Specifies the alignment of an item in a container along the cross axis.

flex : Int -> Float -> String -> Rule

Shorthand for the combination of grow, shrink, and basis.

basis : String -> Rule

Specifies the proportion of total space an item in a container should initially occupy.

grow : Int -> Rule

Specifies the proportion of available space an item in a container should grow into.

shrink : Float -> Rule

Specifies the proportion of missing space an item in a container should shrink into.

order : Int -> Rule

Specifies the relative order an item in a container should appear in.

Nodes

column : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg

Returns a div node which is styled as a flexible box with a column layout.

columnReverse : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg

Returns a div node which is styled as a flexible box with a reverse column layout.

row : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg

Returns a div node which is styled as a flexible box with a row layout.

rowReverse : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg

Returns a div node which is styled as a flexible box with a reverse row layout.

module Layout.Flex exposing
  ( Wrap(..)
  , Basis(..)
  , alignContent
  , alignItems
  , justifyContent
  , wrap
  , alignSelf
  , flex
  , basis
  , grow
  , shrink
  , order
  , column
  , columnReverse
  , row
  , rowReverse
  )

{-| Functions for creating flexible box layouts.

# Options

## Containers

@docs Wrap
@docs alignContent
@docs alignItems
@docs justifyContent
@docs wrap

## Items

@docs Basis
@docs alignSelf
@docs flex
@docs basis
@docs grow
@docs shrink
@docs order

# Nodes

@docs column
@docs columnReverse
@docs row
@docs rowReverse

-}

import Html exposing (..)
import Html.Attributes exposing (..)

import Layout.Common exposing (..)

-- OPTIONS ---------------------------------------

{-| Specifies the wrapping of the items in a container. -}
type Wrap
  = Forward
  | Reverse

{-| Specifies the size of an item before remaining space is distributed. -}
type Basis
  = Auto
  | Size String

{-| Specifies the alignment of the lines of items in a container along the cross axis. -}
alignContent : Align -> Rule
alignContent option = case option of
  Start -> Just ("align-content", "flex-start")
  Center -> Just ("align-content", "center")
  End -> Just ("align-content", "flex-end")
  Around -> Just ("align-content", "space-evenly")
  Between -> Just ("align-content", "space-between")
  Stretch -> Nothing

{-| Specifies the alignment of the items in a container along the cross axis. -}
alignItems : Align -> Rule
alignItems option = case option of
  Start -> Just ("align-items", "flex-start")
  Center -> Just ("align-items", "center")
  End -> Just ("align-items", "flex-end")
  Around -> Nothing
  Between -> Nothing
  Stretch -> Just ("align-items", "stretch")

{-| Specifies the alignment of the items in a container along the main axis. -}
justifyContent : Align -> Rule
justifyContent option = case option of
  Start -> Just ("justify-content", "flex-start")
  Center -> Just ("justify-content", "center")
  End -> Just ("justify-content", "flex-end")
  Around -> Just ("justify-content", "space-evenly")
  Between -> Just ("justify-content", "space-between")
  Stretch -> Nothing

{-| Specifies the wrapping of the items in a container. -}
wrap : Maybe Wrap -> Rule
wrap option = case option of
  Just Forward -> Just ("flex-wrap", "wrap")
  Just Reverse -> Just ("flex-wrap", "wrap-reverse")
  Nothing -> Just ("flex-wrap", "nowrap")

{-| Specifies the alignment of an item in a container along the cross axis.  -}
alignSelf : Align -> Rule
alignSelf option = case option of
  Start -> Just ("align-self", "flex-start")
  Center -> Just ("align-self", "center")
  End -> Just ("align-self", "flex-end")
  Around -> Nothing
  Between -> Nothing
  Stretch -> Just ("align-self", "stretch")

{-| Shorthand for the combination of `grow`, `shrink`, and `basis`. -}
flex : Int -> Float -> String -> Rule
flex grow shrink basis = Just ("flex", (toString grow) ++ " " ++ (toString shrink) ++ " " ++ basis)

{-| Specifies the proportion of available space an item in a container should grow into. -}
grow : Int -> Rule
grow option = Just ("flex-grow", toString option)

{-| Specifies the proportion of missing space an item in a container should shrink into. -}
shrink : Float -> Rule
shrink option = Just ("flex-shrink", toString option)

{-| Specifies the proportion of total space an item in a container should initially occupy. -}
basis : String -> Rule
basis option = Just ("flex-basis", option)

{-| Specifies the relative order an item in a container should appear in. -}
order : Int -> Rule
order option = Just ("order", toString option)

-- NODES -----------------------------------------

element : String -> List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
element direction options attributes children =
  let styles = ("display", "flex") :: (("flex-direction", direction) :: (List.filterMap identity options))
  in div ((style styles) :: attributes) children

{-| Returns a `div` node which is styled as a flexible box with a column layout. -}
column : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
column = element "column"

{-| Returns a `div` node which is styled as a flexible box with a reverse column layout. -}
columnReverse : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
columnReverse = element "column-reverse"

{-| Returns a `div` node which is styled as a flexible box with a row layout. -}
row : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
row = element "row"

{-| Returns a `div` node which is styled as a flexible box with a reverse row layout. -}
rowReverse : List Rule -> List (Attribute msg) -> List (Html msg) -> Html msg
rowReverse = element "row-reverse"