css

Can I avoid this Flex Wrapper?  #angularjs #reactjs

  • Set all div max-width, which is equal to 1000px
  • I’m not really sure if I need a wrapper to delimit the max-width of the container.
  • what you did looks like your wrapper will always be 500px according to mediaqueries, so width of each elements are static.
  • I dont want all divs to have a max-width of 1000px, I want the wrapper of this divs to have that property, but each one of them have a different width.
  • The header has a 100% width, and the .wrapper delimits to a 1000px max width.

This will depend on your exact needs, there’s no fast rule about your exact html structure when it comes to designing a page.

@ng_real_ninja: Can I avoid this Flex Wrapper? #angularjs #reactjs

body { margin: 0; } header { margin: 0; padding: 0; background-color: DarkRed; } .header-wrapper { margin: auto; max-width: 500px; padding: 10px 0; } #logo, #tagline, #menu { margin: auto; padding: 5px; } #logo { flex: 2; background-color: Crimson; } #tagline { flex: 5; background-color: Salmon; } #menu { flex: 3; background-color: IndianRed; } @media (min-width: 768px){ .header-wrapper { display: flex; } }

This will depend on your exact needs, there’s no fast rule about your exact html structure when it comes to designing a page.

if you don’t need a barrier and want the content/nav items to span the entire width, then you don’t need a wrapper.

body { margin: 0; } header { margin: 0; padding: 0; background-color: DarkRed; padding: 10px 0; } #logo, #tagline, #menu { padding: 5px; } #logo { background-color: Crimson; } #tagline { background-color: Salmon; } #menu { background-color: IndianRed; } @media (min-width: 768px) { header { display: flex; justify-content: center; } #logo { width: 100px; } #tagline { width: 250px; } #menu { width: 150px; } }

css

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.