how to make this column as straight in flex

So I want all the contents in same direction https://codepen.io/Vicky-clowdy/pen/YzmBLgQ
21 Replies
Jochem
Jochem5d ago
any particular reason you're not just using grid?
vic
vicOP5d ago
I could try that but flex is easier for me
Jochem
Jochem5d ago
both are important tools in the toolbox of a web developer, and you should use whichever fits the situation best.
vic
vicOP5d ago
Sorry I completed it
Jochem
Jochem5d ago
that said, if you add this, the items will all take up the same amount of space:
#three > * {
flex: 1;
}
#three > * {
flex: 1;
}
vic
vicOP5d ago
I create a div and set width for each child
Jochem
Jochem5d ago
also, looking at your code, you're reusing IDs you can't reuse IDs they have to be unique
vic
vicOP5d ago
I use map function in reactjs To render a each div
Jochem
Jochem5d ago
then don't use IDs, use class
vic
vicOP5d ago
Why
Jochem
Jochem5d ago
having multiple elements with the same ID can cause issues https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
The id global attribute defines an identifier (ID) which must be unique in the whole document.
vic
vicOP5d ago
I use IDs all over my project Maybe i would start use classnames
Jochem
Jochem5d ago
you should use classnames, especially any time there's more than one instance of an element
vic
vicOP5d ago
Yep I will use classnamss
Doksuri
Doksuri5d ago
+1 : prefere classnames. i use ids for labels inputs. or for easely selecting somethins with JS but 99% i select with classenames
Jochem
Jochem5d ago
yup, labels is one of the few places you really have to use IDs, but you still need to be certain they're unique in the HTML
Doksuri
Doksuri5d ago
yes
vic
vicOP5d ago
Ok thanks I will change
Doksuri
Doksuri5d ago
maybe i'm too old.. but i can't understand how people think id = "not uniq"
vic
vicOP5d ago
But is it ok if I'd for one element
Jochem
Jochem5d ago
it is, but only if that element is actually unique in your HTML. You can't use an ID for an element that exists only once in a component, and then use that component twice in the same page. In general, it's best to just default to classes unless you actually need an ID. If there's no explicit and explainable reason to use an ID, you use a class
Want results from more Discord servers?
Add your server