Issues with flexbox
Hi guys I am doing some practice for css because I am really bad and I am also learning tailwind at the same time.
my problem is I don't now why I can justify-center a div is what I am doing impossible or what am I doing wrong
here is my code
A screen of my code and what I am trying to do
Not matter what I do I can move the content inside the div I try using gap or just moving with margin or padding nothing happens
please help 🙂
19 Replies
Where is the CSS, please? Can you possibly do a codepen showcase?
@majkl I am using tailwind so the className is the csss
I only scratched tailwind on the surface co I cannot tell. But surely thre is some stylesheet, isn`t it? I need a compiled HTML/CSS/JS that I can look into directly.
do you know anything about react ?
Nope.
RIP haha
let me see if I can compiled in html and css/js
On cursory look, this is a clear case for grid with columns such as 1fr, max-content with children centered vertically.
you mean I should be using grid for the layout ?
because I am currently using flexbox
also I can't export it in to the html and css/js
They are quite similar in a sense an can be combined. For instance for the the top wrapper I would be thinking of
div {display:grid; grid-template-columns:1fr max-content;...}
...and inside it a div with text content and an image.How would you think I can play around with code in screenshot? Please have a look at https://codepen.io/.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
ill keep looking tho
Ok, no good with me then, I would need to see what it is rendering.
Put an outline on the divs children to see, they could be taking up the full width. What happens if you target that div and justify-content: center from a vanilla css stylesheet? Have you looked in dev tools to see if it’s being declared or not?
Would also recommend learning vanilla first if you are , in your own words “really bad”. Memorizing tailwind classes should come after you know what you are doing with vanilla css. Stepping off my soapbox now 🤣
I know what you mean but I feel like tailwind is much easier because I have dont have come up with 100 different class names haha
but yes I should get better with vanilla css 😂
But you have to write those class names 50x to get one style on 50 elements instead. I hear what you’re saying though, that’s the most common reason I’ve heard about why ppl like tailwind.
If I'm seeing this correctly, the issues is that you're
<div className="flex-col justify-center"> isn't working.
I'm not a tailwind person, so correct me if I'm wrong, but, you have your first div, that is flex. That's the flex container.
Then, inside there, you have another div with flex-col, which sets a flex direction... but you can't set a flex direction here, because it's a flex item, not the flex container. The same applies to the justify-center
You also have 2 h1, which you can't do. Better would be
I'm assuming you want the second part on it's own line, so I added block to that one too.
Also, isntead of changing the flex direction and trying to center it with justify, I'd completely remove the <div className="flex-col justify-center"> entirely. Just delete it, and use align-items: center instead: <div className="flex align-center items-center gap-[4.5rem] h-[55vh]">
And lastly, I would say learning Tailwind while learning CSS is similar to learning React without having learned JS first... it can be done, but it's probably not the best idea if you want to get a good understanding of what's going on.