const FlushRight = () => { const Container = styled.div` display: flex; flex-flow: row nowrap; border: 1px solid red; margin-bottom: 20px; padding: 5px; `; const Item = styled.div`border: 1px solid blue;`; const FirstItem = Item.extend` margin-right: 10px; flex: 1 0 auto; `; return ( <Container> <FirstItem>Col 1</FirstItem> <Item>Col 2</Item> <Item>Col 3</Item> </Container> ); }
const FlushRight = () => { const Container = styled.div` display: flex; flex-flow: row wrap; border: 1px solid red; margin-bottom: 20px; padding: 5px; `; const Item = styled.div` border: 1px solid blue; min-width: 100px; `; const FirstItem = Item.extend` margin-right: 10px; flex: 1 0 auto; `; return ( <Container> <FirstItem>Col 1</FirstItem> <Item>Col 2</Item> <Item>Col 3</Item> <Item>Col 4</Item> <Item>Col 5</Item> <Item>Col 6</Item> <Item>Col 7</Item> </Container> ); }