Good!,
I have a question that I do not quite understand. I'm doing a web header, and I'd like to do it all with flex. In this case, I created the boxes and applied them inline-flex. The problem arises when I want to insert a new box with content inside and I keep following it up. How can you keep it from aligning the box that I just inserted in flex?
I put the code.
PS: I have put the complete code.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* reglas generales */
a {
color: inherit; /* ambos heredan del hereda del padre */
text-decoration: inherit;
}
/* reglas tipograficas por defecto */
body {
font-family: sans-serif;
font-size: 1rem;
line-height: 1.45;
font-weight: normal;
font-style: normal;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial;
font-size: 1.2rem;
line-height: 1.2;
font-weight: bold;
color: steelblue;
}
* { padding: 0; margin: 0; box-sizing: border-box;}
/* IMAGENES */
img {width: 100%;}
/* BACKGROUND */
html {
background: url('img/fondo-dark.png');
}
body {
max-width: 93.75rem; /* ANCHO CENTRAL */
margin: 0 auto;
background-color: white;
}
/* HEADER *******************************************************************************************************************************************
*/
.header {
display: flex;
max-width: 100%;
height: 75rem;
background: url('img/dibujos/mujer-1600-1200-min.jpg') no-repeat;
background-size: contain;
}
.header-logo {
width: 6.25rem;
height: 5rem;
background: url('desarrollo/logo.svg') no-repeat center;
background-size: contain;
}
.logo a {
display: block;
height: inherit;
}
.header-container {
width: 100%;
height: 5rem;
display: inline-flex;
justify-content: flex-end;
margin: 1rem 1rem;
}
.header li {
padding-left: 1rem;
color: white;
font-family: 'Open Sans', sans-serif, Arial;
font-weight: bold;
}
#item-lang-es {
padding-left: 2rem;
padding-right: 0;
}
#item-lang-en {
padding-left: 0rem;
padding-right: 0;
}
.header-menu-item {
display: inline-flex;
}
.header-section {
background: tomato;
display: flex;
width: 50%;
height: 250px;
} <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:700|Open+Sans:400,700" rel="stylesheet">
<title>Esperanza G. Perlado Website</title>
</head>
<body>
<!-- HEADER -->
<header class="header">
<h1 class="header-logo">Esperanza G. Perlado Website<a href="#"></a></h1>
<div class="header-container">
<nav>
<ul>
<li class="header-menu-item"><a href="#">PINTURA</a></li>
<li class="header-menu-item"><a href="#">DIBUJO</a></li>
<li class="header-menu-item"><a href="#">OBRA GRÁFICA</a></li>
<li class="header-menu-item"><a href="#">OBRAS</a></li>
<li class="header-menu-item"><a href="#">SOBRE MÍ</a></li>
<li class="header-menu-item" id="item-lang-es"><a href="#">ES</a></li>
<li class="header-menu-item" id="item-lang-en"><a href="#">EN</a></li>
</ul>
</nav>
</div>
<section class="header-section">
<a href="#"><img src="#" alt="#"></a>
<span>Serie 4 estaciones</span>
<h1>primavera</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, explicabo pariatur nemo necessitatibus eveniet saepe distinctio esse laborum neque voluptatum quia? Praesentium ea, ipsa laborum ad eligendi tempora recusandae esse.</p>
<div><a href="#">Más información</a></div>
</section>
</header>
<!-- MAIN -->
<main class="main">
<section class="slider">
<div><a href="#">Más información</a></div>
<h1>verano</h1>
</section>
<section>
<img
<div><a href="#">Más información</a></div>
<h1>invierno</h1>
</section>
<section>
<img src="#" alt="#">
<div><a href="#">Más información</a></div>
<h1>calle vacia</h1>
</section>
<section>
<img src="" alt="">
</section>
<section>
<span>dias de la semana</span>
<h1>paseo del domingo</h1>
<!-- LINEA EN CSS -->
<p>Lorem ipsum</p>
<div><a href="#">Más información</a></div>
</section>
<section>
<img src="#" alt="#">
</section>
<section>
<div><a href="#">Más información</a></div>
<h1>deducción</h1>
<p>Lorem ipsum</p>
</section>
<section>
<ul>
<li>
<h1>mis obras</h1>
<p>conoce todas las obras</p>
<div><a href="#">Más información</a></div>
</li>
<li>
<h1>venta</h1>
<p>compra la que mas te guste</p>
<div><a href="#">Más información</a></div>
</li>
<li>
<h1>contribuye</h1>
<p>todas las donaciones se recaudan para fines beneficos</p>
<div><a href="#">Más información</a></div>
</li>
</ul>
</section>
</main>
<!-- FOOTER -->
<footer>
<span>Todos los derechos reservados</span>
</footer>
</body>
</html>Thanks !!