styled-components-flexbox-tooltip v1.4.2

Write

import styled from "styled-components";
import flex from "styled-components-flexbox-tooltip";

const Wrapper = styled.div`
  ${flex.CenterCenterColumn};
  background-color: red;
  padding: 1.1rem;
`;

Instead of

import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-directon: column;
  background-color: red;
  padding: 1.1rem;
`;

Instruction

The first word is align-center property the second justify-content and the last determines its direction.

All options:

• CenterDefault
• CenterDefaultColumn
• DefaultCenter
• DefaultCenterColumn
• CenterCenter
• CenterCenterColumn
• CenterAround
• CenterAroundColumn
• CenterBetween
• CenterBetweenColumn
• CenterEvenly
• CenterEvenlyColumn
• Wrap

Creators