html - react - justify content style

justify-content: espacio entre fallas para alinear elementos como se esperaba

Question

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>

Violín aquí

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.

Answer 1

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>

Answer 2

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)

Answer 3

<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">

ingrese la descripción del enlace aquí