html - react - justify content style
justify-content: espacio entre fallas para alinear elementos como se esperaba (3)
Necesitaba usar flexbox para centrar mi navegación y, por lo tanto, se me ocurrió lo siguiente:
.navbar-brand > img {
width: 100px;
}
.navbar-default {
background-color: #fff;
border-color: #fff;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.navbar-default .navbar-nav > li > a {
color: #464646;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active {
color: #727272;
}
.navbar-default .navbar-nav > li:not(.active) > a:before {
content: '''';
position: absolute;
bottom: 0;
left: 30%;
right: 30%;
height: 1px;
background: #ed1c24;
opacity: 0;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.navbar-default .navbar-nav > li > a:hover:before {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.navbar-default .navbar-nav > li:first-child > a {
font-weight: 700;
}
.navbar-default .navbar-nav > li.active > a {
background: #ed1c24;
color: #fff;
padding-top: 25px;
padding-bottom: 25px;
position: relative;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active > a:active {
background: #e0222a;
color: #fff;
}
.navbar-default .navbar-nav > li.active:hover > a:after {
bottom: 0;
}
.navbar-default .navbar-nav > li.active > a:after {
font-family: FontAwesome;
content: ''/f078'';
position: absolute;
bottom: 5px;
font-size: 0.6em;
/*opacity: 0.8;*/
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
/* use flexbox to center align nav elements above 992px */
@media (max-width: 992px) {
.navbar-default .navbar-nav > li > a {
text-align: center;
}
.navbar-collapse {
max-height: 350px;
overflow-y: hidden;
}
}
@media (min-width: 992px) {
.navbar-default {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar-default {
min-height: 100px;
}
.navbar-default .navbar-right {
display: flex;
align-items: center;
}
.navbar-default > .container {
display: flex;
align-items: center;
justify-content: space-between;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="Logo">
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a>
</li>
<li><a href="consulting.html">CONSULTING</a>
</li>
<li><a href="devices.html">Medical Devices</a>
</li>
<li><a href="">Servises</a>
</li>
<li><a href="">News</a>
</li>
<li><a href="">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Como puede ver en el HTML, el
.container
tiene dos elementos secundarios.
Tengo el siguiente CSS aplicado al elemento
.container
:
.navbar-default > .container{
display: flex;
align-items:center;
justify-content:space-between;
}
El problema es que el
space-between
no hace que los dos elementos secundarios del contenedor estén en los bordes izquierdo y derecho del contenedor.
El comportamiento que quiero es que los dos elementos secundarios deben estar en el borde izquierdo y derecho, esto se puede lograr usando flotadores, IE, floto un niño a la izquierda y uno a la derecha.
Además, si aplica
flex-start
y
flex-end
los elementos serán arrastrados hacia el borde pero, con
flex-start
y
flex-end
, ambos elementos serán arrastrados hacia un lado.
Por lo tanto, necesito usar el
space-between
.
¿Alguien puede decirme por qué el
space-between
no funciona?
Este error está causando un gran problema de alineación en todo mi sitio, por favor, alguien me diga qué estoy haciendo mal.
Dado que los elementos posicionados en flexión solo responden directamente a elementos secundarios directamente.
Envuelva todo bajo la clase
.container
con un div y dele a ese div la
position: flex
y el
justify-content: space-between
.
Ejemplo:
<nav>
<div class="container">
<div class="wrapper">
...
<div>
</div>
</nav>
<style>
.wrapper {
position: flex;
justify-content: space-between;
}
</style>
El problema es un conflicto con la hoja de estilo Bootstrap, que coloca pseudoelementos en su contenedor flexible.
Esto hace que el
space-between
calcule múltiples elementos flexibles en lugar de solo dos.
Aquí está tu contenedor flexible:
El logotipo y el menú de navegación están alineados con
justify-content: space-between
, pero no están posicionados en bordes opuestos.
La alineación se parece más al
space-around
.
Aquí están los pseudoelementos
::before
y
::after
de Bootstrap (o elementos pseudo-flex):
Como se señala en la documentación de Firefox :
Los pseudoelementos in-flow
::after
y::before
son elementos flexibles.
Pongamos algo de contenido en los pseudos:
Como brillar una luz negra en una habitación de motel, ves muchas cosas que desearías que no estuvieran allí.
Elimine (o anule) los pseudoelementos y su problema desaparecerá:
Más detalles sobre contenedores flexibles y pseudoelementos:
- Pseudo elementos que rompen justify-content: espacio intermedio en el diseño de flexbox
- Dimensionar y alinear correctamente los elementos flexibles en la última fila
- Métodos para alinear elementos flexibles a lo largo del eje principal (ver Cuadro # 81)
<style> #logo{
position:absolute;
float:left;
left:10px;
}
</syle>
<img id="logo" src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="Logo">