i cant figure out why flex box isnt working

[elder nimbus]

im really struggling to figure out how to order my text like the example shown. here is a link to my code: https://scrimba.com/scrim/co1494d7c975b79fe5436ce5b

[south olive]

The best way to do layout (IMO) is to think of it as a skeleton or grid, with meaning. If you look at the thing you're trying to duplicate, you can split it up into containers and elements and then organise within those things. Try to go from big to small, organising the structure first. Taking a quick look at your code, look into 'flex-direction' as that's probably the most important property here

So you have the red 'container' - semantically, it contains the things you need in that section. Then within that section the elements seem to be in 2 rows : the title and the row of activity cards. Now you know that that outer container needs to have styling to get those 2 rows to stack vertically - how do you do that?

Then you want to split the activity row into 3 column blocks as each is completely separate. Which flexbox settings on which div would do that? Do you need extra containers?

Then, finally, you know that the activity card itself has 3 elements in a single column.

[elder nimbus]

@south olive firstly, thank you so much for replying. this is very helpful. ive been spending all morning on this and i feel so silly because i still cant quite get it right. ive put in a few flex containers, but the text description below each title for the activites wont align properly and i cant get the text to condense into smaller columns. here is a screenshot and a link to my code again: https://scrimba.com/scrim/co1494d7c975b79fe5436ce5b

im reading over what you said and i think ive gone about flexbox totally wrong

[south olive]

No problem. Don't feel silly. CSS is notoriously difficult to get to cooperate 😅 And because code is meant to be DRY I feel like a lot of beginners are scared to add too many divs / sections / containers, but if you need it then do it tbh. I would say to add a container around each 'thing' that is a separate element, semantically. So as each activity is its own thing, it should have a container around it, as an example <div class="activity-card"></div> or w/e. I'm trying to think of how to describe that but I hope that makes sense!

I missed a sentence off my first message and added it later, so maybe you didn't see it. But take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction ... that's what will help you structure the elements inside any container

[elder nimbus]

thanks so much im going over your step by step and its already looking a bit better

[elder nimbus]

https://scrimba.com/scrim/co1494d7c975b79fe5436ce5b ive changed the containers around so they make more sense, but visually they arent aligning properly D:

[south olive]

So when you have multiple elements with the same styling (e.g. the activity cards), you can reuse classes. It's a good idea to name them something meaningful too so you know what you're looking at when you're changing the styling.

.flex-container1 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;   
}
.flex-container2 {
     display: flex;
     flex-direction: column;
    justify-content: space-around; 
}
.flex-container3 {
   display: flex;
   flex-direction: column;
   justify-content: space-around; 
}

these are all the same, so you can just have one and reuse it on all the elements. for the sake of speed, have one class: 'activity-card' and apply it to all 3 in the HTML. You can reuse classes (but not IDs). Give me a sec to look at the alignment

[elder nimbus]

thank you ^-^

[south olive]

it's pretty complicated, this isn't on you. flexbox isn't even always the right thing to use - it has some limitations for simple stuff like equal widths/heights. I'm not sure how far you are into the course, but grid might be better for the row of cards? If you really want to use flex, there's quite a few more steps and properties to add

[elder nimbus]

that screenshot is perfection, how did you do it? ive heard of grid but havent been introduced to it yet

i really appreciate your help

[south olive]

if you want to stick with it, what to look up:

• how to align the items to the center of the card (not the text in the paragraph, the elements)
• how to set the width of the flex card
• how to set the gap between the cards / columns (hint: the bolded words...)

and just to make this quicker. Put a padding or margin on the left and right of the activities-container so that the cards aren't flush to the side of the window

remember you can use maths or calculations in CSS too. so it can be a responsive value like a percentage...

[elder nimbus]

thank you so much

ill look into this now

[south olive]

you're welcome. it's all trial and error and practice, really. i still look things up regularly and i've been using HTML/CSS since the 00's. try different things, check the mozilla documentation for the properties, and good luck

[elder nimbus]

thanks so much ^-^ youre the best!!

[elder nimbus]

im almost there

i looked up the questions and apparently column-gap / row-gap is a thing on css but it doesnt respond when i tried it, i also tried setting the width within the text containers but nothing happens

[south olive]

if it's not working, try it on a different thing. if it's not working on the element itself, try the containing element or the outer container. gap def works here 🙂 setting width in flex can be a bit weird, but it's possible

have a ponder about what you're trying to do. do you want to individually set the width of the description in each box? or do you want to set the width of the (flex)box holding it, with one class, so that all the boxes are the same width and everything inside can't be wider than that? 😉 https://www.w3schools.com/cssref/css3_pr_flex.php

[elder nimbus]

thank you 🙂

youre a real one!