Flex: 1 vs margin-inline: auto
Hello, can someone explain the difference between setting a flex item to
flex: 1 and using margin-inline: auto pls.
What I wanted to know specifically is, if we use margin inline and flex of 1 on the same element, will this cancel out the effect of flex 1 to grow, because the available space will be distributed accordingly, no?14 Replies
if it's allowed to grow with flex: 1; i assume the margin will equal 0 🙂
https://codepen.io/Fakeur/pen/pvgwqKa
Have a look at the
flex : 1; on my input element in the nav barwhether it's present or not, there is no visible change
if I remove the margin-inline on the
searchbar-wrapper though, I think the search bar takes a bit more width
so just wondering why flex 1 isn't working here
yeah, my input isn't growing to "fit" size of the wrappercan you put your code in https://jsfiddle.net/ i have problems accessing codepen for some reason 🙂
JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
sure
test - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
your input element is not a flex child
but searchbar does have a display flex, no?
AHH
SORRY
wait
you can put
flex: 1; on .search and give your input width: 100%;
i assume that is what you want to achieveyep or we can also display .search as flex, then use only flex 1 on input, it should work, theoretically, no?
yup
yup
will try it out and let you know, ty !
yw :thumbup:
yep it worked, ty !