CODEWITHSUNDEEP
reactjsstyled-components
aroe
aroe

Reputation: 519

Parent and Child Component Styling in React for Multiple Accordions

So in my react project I have a bunch of components who's parent components all get called and formatted in the index.js file I am about to paste. The index.js file exports a main function where all previous components are living into the app.js and then the DOM/index.js. Here is my code for the first index.js file:

import {React} from 'react'
import SocialFooter from '../components/SocialMediaFooter'
import Header from '../components/Header'
import SkillsAccordion from '../accessories/SkillsAccordion'
import WorkAccordion from '../accessories/WorkAccordion'
import styled from 'styled-components'



const MasterAccordionContainer = styled.section`
    position: relative;


`;
const Main = (props) =>{
    return(
    <div>
        <div>
        <Header />
    </div>
    <div>
        <MasterAccordionContainer>
        <SkillsAccordion />
        <WorkAccordion style={props.children}/>
        </MasterAccordionContainer>
       
    
    </div>

    
    
    <div>
        <SocialFooter />

    </div>

    </div>


    )}



    //add all react components here and export to app.js


export default Main;

Here is my task: I need to somehow style the WorkAccordion component and the SkillAccordion component so that they sit next to eachother rather than one of top of the either. Here is a screenshot of what I mean. ReactPicture

So I need those two Accordions to be side by side instead of on top of one another. I believe this has something to do with me needing to reference absolute and relative positions in the styling off of one another but, I am not sure how to do that. Thank you all in advance for any help you can give me!

Edit:

display:flex

when adding display:flex; the Accordion gets distorted, see picture above

Edit: After adding the styling for flexbox directly to the container MasterAccordioinContainer it all worked perfectly!

Picture below: enter image description here

Upvotes: 1

Views: 639

Answers (1)

buzatto
buzatto

Reputation: 10382

if you set display: flex; to your parent, its children will be side by side by default, unless you set flex-direction: column (default is row). you could also add the the style flex-wrap: wrap to become responsive for smaller devices. a good guide on flexbox you can find it here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions