0.1.2 • Published 7 years ago
styled-flex v0.1.2
styled-flex
Styled FlexBox Components
Styled components, for flexbox powered container components.
NPM
npm install --save styled-flex
Components
Flex
<Flex row alignCenter justifyStart>
...
</Flex>
<Display column alignStart justifySpaceAround width={"50vw"}>
...
</Display>
Row
<Row alignCenter justifyStart width={"100vw"}>
...
</Row>
Column
<Column alignCenter justifyStart flexBasis="0">
...
</Column>
Example Usage
Conditional Layouts
Use with react responsive for conditional layouts
import { Row, Column } from "styled-flex"
import MediaQuery from "react-responsive"
export const RowColumn = props => {
return <div>
<MediaQuery query="(min-device-width: 1224px)">
<Row alignCenter
{...props}>
{ props.children }
</Row>
</MediaQuery>
<MediaQuery query="(max-device-width: 1224px)">
<Column alignStart
{...props}>
{ props.children }
</Column>
</MediaQuery>
</div>
}
As A Base Component
my/components.js
import { Row, Column } from "styled-flex"
import styled from "styled-components"
const MainContainer = styled(Column)`
background-color: black;
`;
export { MainContainer }
my/views/app.js
import { MainContainer } from "my/components"
export class App extends Component {
...
render() {
return <MainContainer flexGrow="2" alignStart>
{ children }
</MainContainer>
}
}