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:

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

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

• Is flexbox used for only the layouts?
• Can flexbox help in aligning the text, images, icons inside layout/columns?
• 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.