Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Tengo dudas con flexbox

CSS - Tengo dudas con flexbox

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Tengo dudas con flexbox

Publicado por Julio Cesar (14 intervenciones) el 02/07/2017 07:11:48
Me gustaría que alguién me ayude con un código. Tiene que ver con flexbox y el posicionamiento.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
-1
Responder
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Tengo dudas con flexbox

Publicado por xve (490 intervenciones) el 02/07/2017 12:57:55
Que necesitas Julio?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Tengo dudas con flexbox

Publicado por Julio Cesar (14 intervenciones) el 02/07/2017 17:24:32
Si usas el código que tengo a continuación, te daras cuenta el <h1> no esta bien centrado dentro del header, ya que hay un logo que lo quiero a la izquierda. ¿Qué puedo hacer para que el <h1> se centre bien dentro del header sin mover la imagen de su lugar?
Tambien me pregunto porqué hay tanto espacio entre el logo y el <h1>.

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta robots="no-follow">
	 <title>LCHANNEL</title>
	 <link rel="stylesheet" type="text/css" href="lchannel.css">
 
</head>
<body>
    <!--Aquí empieza el header-->
    <header>
    <img src="logolc.png" id="logo">
    <h1>LCHANNEL</h1>
    </header>
</body>
</html>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
body{
	background-color: #000;

}
header{
	width: 95%;
	height: 150px;
	margin:0 auto;
 
	background: url(bgsqs.jpg);
	background-color: #125;

	background-size: 200% 350%;
	background-position: center center;
	background-repeat: no-repeat;
 
	border: 4px solid #FFF;

	border-right: none;
	border-left: none;
 
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}
 
#logo{

	width: 80px;
	height: 80px;
	background: #112255;

}
 
h1{
	background: #000;

	width: 400px;
	color: #fff;

	border: 4px solid #FFF;

	text-align: center;
	font-size: 2.5em;
	font-family: "Agency FB", Arial, sans-serif;
	border: 4px solid #FFF;

	border-radius: 15px 15px 40px 40px;
        height: 50px;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Tengo dudas con flexbox

Publicado por xve (490 intervenciones) el 03/07/2017 08:19:26
Hola Julio, te he preparado un código en el que la imagen la he puesto en posicion absoluta para que no ocupe espacio... haber si te sirve:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta robots="no-follow">
	 <title>LCHANNEL</title>
	<style>
body{
	background-color: #000;

}
header{
	width: 95%;
	height: 150px;
	margin:0 auto;
 
	background: url(bgsqs.jpg);
	background-color: #125;

	background-size: 200% 350%;
	background-position: center center;
	background-repeat: no-repeat;
 
	border: 4px solid #FFF;

	border-right: none;
	border-left: none;
 
 
	justify-content: center;
	text-align:center;
	position:relative;
}
 
#logo{

	width: 80px;
	height: 80px;
	background: #112255;

	position:absolute;
	left:0px;
}
 
h1{
	background: #000;

	width: 400px;
	color: #fff;

	border: 4px solid #FFF;

	text-align: center;
	font-size: 2.5em;
	font-family: "Agency FB", Arial, sans-serif;
	border: 4px solid #FFF;

	border-radius: 15px 15px 40px 40px;
    height: 50px;
    display:inline-block;
}
</style>
 
</head>
<body>
    <!--Aquí empieza el header-->
    <header>
    <img src="logolc.png" id="logo">
    <h1>LCHANNEL</h1>
    </header>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Tengo dudas con flexbox

Publicado por Julio Cesar (14 intervenciones) el 03/07/2017 18:41:01
MUCHAS GRACIAS, entonces, ¿simplemente no se puede hacer eso con flexbox?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ángel María

Tengo dudas con flexbox

Publicado por Ángel María (1 intervención) el 06/07/2017 19:48:24
Hola Julio no se si seguirás con la misma duda.

Aquí te adjunto tu código CSS usando "display: flex" y añadiendo "display : inline-flex" al logo y al h1. Esto hace que sean elementos flexibles dentro de la caja padre (el header). Además en vez de usar un ancho del h1 en px, es recomendable usarlo en % ya que así se amolda al tamaño de tu pantalla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
body{
	background-color: #000;

}
header{
	width: 95%;
	height: 150px;
	margin:0 auto;
 
	background: url(bgsqs.jpg);
	background-color: #125;

	background-size: 200% 350%;
	background-position: center center;
	background-repeat: no-repeat;
 
	border: 4px solid #FFF;

	border-right: none;
	border-left: none;
 
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}
 
#logo{

	width: 80px;
	height: 80px;
	background: #112255;

	display : inline-flex;
}
 
h1{
	background: #000;

	padding-left: 10%;
	padding-right: 10%;
	color: #fff;

	border: 4px solid #FFF;

	text-align: center;
	font-size: 2.5em;
	font-family: "Agency FB", Arial, sans-serif;
	border: 4px solid #FFF;

	border-radius: 15px 15px 40px 40px;
    height: 50px;
    display : inline-flex;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
3
Comentar