Using many flexbox and grid is good combination?

Hello, I am learning to design using HTML/CSS. Today I made very basic page layout of Google Homepage. The link to code pen is given below.

link: https://codepen.io/the_c0der/pen/LYebbBY

Please check it and I have following questions if you can spare some time to answer them, it would be excellent for my learning.

1: I have used flexbox an gridbox combination in this code, is it a good approach?

2: I have used many flexbox in this simple layout is this good approach? I mean wherever i need to move things in center (vertically/horizontally) I just gave it a container div and then used flexbox to style it. So its good or there should be minimum flexboxes or gridboxes?

3: If you hover over the button “Google Search” You can notice that both the buttons are getting hover effect while it is applied to only one. Why is that?

Not sure about # 1 & 2. I think the simplest approach that works and is valid HTML/CSS code is best. But sometimes fancy or complicated things require complicated solutions.

for #3, I think what happens is the border on hover is set to 1px on class .google-search.

.google-search:hover {
  border: 1px solid transparent;
}

So when you hover, it changes size from 2px —> 1px (I think 2px is the default border size of a button… at least in FF & Chrome).

The change in size of the border of the first button is affecting the space flow of the content inside that div.

You can see it if you open Dev Tools and inspect the element, then hover over it with mouse…

Animation

(FCC resized the animated gif, and clicking it doesn’t pop up a full size version… but you can do “save as” or “open in new” tab to see it full size).

The “I’m Feeling Lucky” button is sliding left to accommodate the border shrink of the first button.

Styling that doesn’t affect the space, wouldn’t affect the 2nd button.

For example, try changing the border property value to 2 so there’s no size change ( or temporarily remove the border property), and add a color property to change the button text color to blue on hover… see how the color change only affects the “Google Search” button, because it is not a change that affects the space flow of the container.

.google-search:hover {
  border: 2px solid transparent;
  color: blue;
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.