CODEWITHSUNDEEP
htmlcssreactjsflexbox
daydreamer
daydreamer

Reputation: 91959

How to style text components using CSS flexbox architecture?

I am new to CSS and front-end development in general.

Yesterday I learnt that using CSS Flex box we can create fluid layouts which work perfectly with screen of different sizes.

I am currently using React with https://roylee0704.github.io/react-flexbox-grid/. So far I am able to create layout boxes with 3 columns. However, I found that the text in the columns does not align correctly.

So I added some padding to make it look good on browser:

enter image description here

But on smaller screen, this doesn't look right:

enter image description here

My code for this part look like 

const MenuItemStyle = {
    paddingTop: '3%'
};

const MenuPriceStyle = {
    paddingTop: '6%'
};

const SpicyMenuItem = (props) => (
    // add price on right side
    <Grid fluid>
        <Row center="lg">
            <Col xs={3} sm={3} lg={2}><Avatar src={props.image}/></Col>
            <Col xs={6} sm={6} lg={4}>
                <div style={MenuItemStyle}>{props.name}</div>
            </Col>
            <Col xs={3} sm={3} lg={2}>
                <div style={MenuPriceStyle}>{props.price}</div>
            </Col>
        </Row>
    </Grid>
);

Questions

I am confused as to if I still need to write media-queries in addition to using flexbox.

Upvotes: 0

Views: 71

Answers (1)

Alyssa Hope
Alyssa Hope

Reputation: 116

Questions - Is flexbox used for only the layouts? Not sure what you mean here, but it can be used to create responsive grid layouts if you want. CSS-Grid would be another, possibly more straightforward way to do that though.

  • Can flexbox help in aligning the text, images, icons inside layout/columns?

Absolutely. There are many guides that go through the awesome flexibility that you have in aligning flexbox content. I won't even try to go through it all here because there is too much and it has been discussed a lot already.

Check out these links:

https://css-tricks.com/almanac/properties/a/align-content/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

  • Is it recommended to use media-queries and write separate rules to align text, image, icons for different screen sizes? I am confused as to if I still need to write media-queries in addition to using flexbox.

You will not need media queries nearly as much - they will only be necessary when you want to change the behavior on mobile to something other than the default behavior of flexbox. Start with no media queries, and then see if you like the look on mobile, all you should need are some small tweaks.

Upvotes: 1

Related Questions