Help with CSS flexbox
Hi, these two elements are inside a navbar with a display of flex. What is the best way to bring the logo on the left and the search bar at the center? also considering responsiveness. Thanks in advance.
78 Replies
grid
just this:
im not sure about the exact property for the last line, but you can click the tiny grid icon next to the display, and center the items
this should be applied only on the navbar parent container?
yes
to the closest parent element that has the image and the search form
this is the result i got and its all on the left
looks correct to me
the image is on the left and the form is centered on the rest of the space
in the element inspector, click on the grid button next to the element
this is what i meant
the search bar should be at the center of the page
that is different
but do what i said
i took the screenshot in a bad way sorry lol
take a screenshot with this on
im on mobile
so, i got the wrong property for the last line
on the right side, you should see a button next to the display grid
click on it and then click on anything that has a symbol representing the center
i only see the button grid when inspecting in the html and also in the css in the dev tool but when i click i only get this
on the right side?
on the css side?
it should have a button, unless you use firefox
i have firefox yes
this is what i see
you have "space-between" as the value
I was just trying but with center its the same thing
try
align-items
this is the part i never rememberalign items center?
nothing changes as well same result
just the input bar got less thick
Do you want the search box centered in the viewport or centered in the remaining space?
If you want it centered in the viewport you could try defining 3 columns:
the search box should be centered in the screen so i guess viewport
also tried your solution and the result is the same again
this one
i mean the result is the same one as that one
i would do
1fr auto 1fr but that works too (or the meh repeat(1fr, 3)yes, whichever, the idea is to add a "fake" column to the right
yeah
i got it
Can you share the code?
What we are saying should work
i would use auto so you can just set the alignment on the parent instead of a specific child
you are right, auto makes things simpler. You then don't even need to define center in any way
that too
how do i send the code to make it look like a snippet?
just send an example over codepen or jsfiddle
dont paste the code here
it's easier to experiment and debug, comparent to you sending lumps of code and us having to guess what it is doing
#Asking Good Questions has some info
give me a sec
But yeah, codepen is by far preferable
this is the code i have
change the second grid-template-columns value to "auto" as Epic suggested
if you mean removing the 1fr 1fr 1fr i did it and now this is the result
all on the left and the logo up and search bar down
no, replace the middle one for
auto
you will have 1fr auto 1frit worked, the search bar is super thick but i guess its a value inside of it that i need to change
The reason 1fr didn't work was because you have defined a fixed width on the search element. That is fine, however it does demonstrate why it helps to have the complete (relevant) code.
it's because you have the input as a child of the nav
it shouldnt be?
move the input inside a <form>
inputs should always be inside forms?
no, you will need a form with a submit button to handle the search
... it's complicated
it's not a must, but you will need it for this case
you will, for sure, also add a submit button for the search
and for that, you need the form
i was kind re-making a project i saw and the guy uses nav bar and inside the search component with just the input
im using react not vanilla js
also, since the form is the parent, the input wont be controlled by the grid
original one
EW
ew ew ee
ew
sorry, but EEEEEWWWWWWWW
Explain no?
yes
not only it isnt accessible, it's terribly ineficient as it will trigger multiple searches without debouncing
That's a very React way of doing things
As I said im using React and not Vanilla JS
and since the type is
text, you arent properly informing the assistive technologies of what the field is
im talking about the bad html, not about using react
that is fine for a toy, but if you want to transform it into something you will use in a public-facing project, you will have to fix itRegarding the reason as to why it has the same height as the grid is because grid cell contents automatically stretch to be 100% the height of their parent.
Unless otherwise specified, this height is defined by the "tallest" child (in this case your logo).
There are several ways to change this, the simplest probably being to define this in the parent element
align-items: center; (as again Epic mentioned earlier). However, this will affect all of the grid children. If you just want to define it on a specific child (eg your search) you can define this align-self: center; on that specific element.or just move the input into a form
and the form will have the space it has
thanks for this
Epic idk how to explain you this because im not really an expert but in React in this case the application the form or input doesn't do anything React holds the input value and changes
with grid or flex, you can set the submit button on the right side, and makr it amazing
it was a comment about the original react code, not about your skills
no im telling you that i think the guy doesnt put the input in the form because we arent following any js logic here. React is in charge of taking the value from the input not the submit
like this thing you said
you can set a change event on the form, as it bubbles up
and with the search type, chrome implements debouncing for you
i will look into what you say. In the end how can I understand when I need a flexbox or grid? because I thought grids was only from grid looking stuff
that is a grid looking thing
how exactly?
you now have space to add a button on the right side that triggers a menu to shoe/hide
show
i dont need a button. The user types and you have a window with the results under it and he just needs to click on them
and an API display the results
i was talking about a possible navigation menu
so why is this a grid looking thing?
i saw something rigid
the logo had it's specific size and the input has it's specific size
and with grid, you can have much easier control of what each child does, from the parent
with flex, you can do this
you set the image to have
flex-grow: 0; flex-shrink: 1 and the input has flex: 1 1 max-content or something
it's a lot more work
disclaimer: THIS IS NOT ADVICE AND IS A VERY VERY SUBJECTIVE AND NARROW VIEW OF HOW I INTERPRETED THE PROBLEM
when i want to decide if it is grid or flex, i think about how i want it to behave and look like and how i want to control the layout
it's mostly based on feelins, maintaibability and intuitionOk thanks for the help
the guy also used a grid for his navbar but the layout was different from mine
how was the layout?
just 3 elements instead of two but in the case you can also use a flexbox i guess and pick space btw
and then with margins you move stuff around
yes
you can do all that
or you can use 3 lines of css, with grid
and stuff is positioned as specified by the parent
ok thanks again, have a nice day
you too, and you're welcome