No estoy realmente seguro si necesito un contenedor para delimitar el ancho máximo del contenedor.

El header tiene un ancho del 100%, y el .wrapper se delimita a un ancho máximo de 1000 px.

¿Hay alguna forma de evitar usar el div .wrapper?

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;
  }
}
<header>
  <div class="header-wrapper">
    <div id="logo">Logo</div>
    <div id="tagline">Tagline</div>
    <div id="menu">Menu</div>
  </div>
</header>

CodePen

0
Gekyzo 29 dic. 2016 a las 00:09

3 respuestas

La mejor respuesta

Esto dependerá de sus necesidades exactas, no hay una regla rápida sobre su estructura html exacta cuando se trata de diseñar una página.

Si desea un color de fondo que se extienda por toda la 100% width pero desea que el contenido tenga una barrera izquierda / derecha oculta, probablemente desee un envoltorio para forzar esa regla de barrera. de lo contrario, el fondo rojo solo será tan ancho como la regla 1000px (o lo que sea que establezca sus límites centrados)

Si no necesita una barrera y desea que los elementos de contenido / navegación abarquen todo el ancho, entonces no necesita un contenedor.

De nuevo, depende de usted dependiendo del diseño general del componente.

0
abdul ahmad 28 dic. 2016 a las 21:15

Establezca todo el ancho máximo de div, que es igual a 1000 px

0
grinmax 28 dic. 2016 a las 21:39

Lo que hiciste parece que tu contenedor siempre será de 500 px de acuerdo con las consultas de media, por lo que el ancho de cada elemento es estático.

Puede modificar sus consultas multimedia y eliminar el contenedor adicional y los valores flexibles.

El fragmento a continuación se comporta como tu codepen ... con un contenedor menos:

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;
  }
}
<header>
  <div id="logo">Logo</div>
  <div id="tagline">Tagline</div>
  <div id="menu">Menu</div>
</header>

http://codepen.io/gc-nomade/pen/ENqPVp

0
G-Cyrillus 28 dic. 2016 a las 22:01