CFlexRow

CFlexRow is a Layout component representing a <div> Flexbox containing n flex <spans>, where n=amount of flex cols.
e.g.

<div css={css`` display; flex>
<span>1st span</span>
<span>2nd span</span>
...
<span>nth span</span>
</div>

Component Characteristics

• React class component

Dependencies

• @emotion/core (simple css inline-styling)
• Context (experimental)

Methods/Functions/Hooks

• render()
• componentDidMount() - no functionality/experimental except of adding window.resize event listener
• componentDidUpdate() - no functionality/experimental
• onResize() - no functionality/experimental

Props

Props	Description	Default	Valid Input
children or ccontent children has priority	children of span elements	?, undefined, null?	any JSX element wrapped in {[ and seperated by , <CFlexRow>{["1", "2"]}</CFlexRow
show	css restricted display toggle -> if true=> display: flex; -> else=> display: none;	true	bool
flexbasis	css flex-basis of span elements	(1/n)*100%	n x css-length (px, em, %...) wrapped in {[ and seperated by , <CFlexRow flexbasis={["50%", "50%"]}> ...</CFlexRow>
minwidth	css min-width of span elements	if flexbasis[i] abs in px=> minwidth[i]=flexbasis[i] if flexbasis[i] is undefined or "auto => "" if one flexbasis is abs (but not current)=>minwidth[i]="0%" else => "350px" (FOCUS ON PARAGRAPHS)	n x css-length (px, em, %...) wrapped in {[ and seperated by , <CFlexRow minwidth={["50%", "50%"]}> ...</CFlexRow>
maxwidth	css max-width of span elements	if flexbasis[i] abs in px=> maxwidth[i]=flexbasis[i] else => maxwidth[i]=""	n x css-length (px, em, %...) wrapped in {[ and seperated by , <CFlexRow minwidth={["50%", "50%"]}> ...</CFlexRow>
alignitems	css align-items of div element vertically align items	"stretch"	"stretch", "flex-start", "flex-end", "center"
justifycontent	css justify-content of div element horizontally align items	"normal"	"normal", "flex-start", "flex-end", "center" ...
flexflow	css flex-flow of div element	"row wrap"	[row, row-reverse, column, column-reverse] + [wrap, nowrap, wrap-reverse]
flexgrow	css flex-grow of span elements	"1"	"0", "1" could be modified for individual grow rates by using array
flexshrink	css flex-shrink of span elements	"1"	"0", "1" could be modified for individual shrink by when using array
height	css height of div element	"auto"	css-length (px, em, %...)
heightmobile	css height media-querry<!600px!	height (see above)	css-length (px, em, %...)
margin	css margin of div element	"0px"	css-length (px, em, %...)
padding	css padding of div element	"0px"	css-length (px, em, %...)