Flex-конец и начать не выравнивание по вертикали

Question

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: white;
}

.zindex {
    position: absolute;
    left: 50%;
    top: 15px;
    z-index: 2;
}
#logo {
  padding-bottom: 20px;
}
.center {
  display: flex;
  align-self: center;
}
.bodyclass {
  background-color: #05426E;
  height: 160px;
}

.content-container {
  border-style: solid;
  border-width: 5px;
  margin-top: 5%;
  margin-left: 15%;
  margin-right: 15%; 
  margin-bottom: 15%; 
}

.footer-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}
#flexstart {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#flexend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.centernav {
  display: flex;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  text-justify: center;
}
.snip1226 {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  color: black;
}
.snip1226 * {
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  color: black;
}
.snip1226 li {
  list-style: outside none none;
  margin: 0 1.5em;
  overflow: hidden;
  color: black;

}
.snip1226 a {
  padding: 0.3em 0;
  position: relative;
  display: inline-block;
  letter-spacing: 1px;
  margin: 0;
  color: white;
  text-decoration: none;
}
.snip1226 a:before,
.snip1226 a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1226 a:before {
  bottom: 100%;
  display: block;
  height: 3px;
  width: 100%;
  content: "";
  background-color: #FCDA18;
}
.snip1226 a:after {
  padding: 0.3em 0;
  position: absolute;
  bottom: 100%;
  left: 0;
  content: attr(data-hover);
  white-space: nowrap;
}
.snip1226 li:hover a,
.snip1226 .current a {
  transform: translateY(100%);
}

import React from 'react';
import logo from "./logo.gif";
const Navbar = () => {
  return <div className="bodyclass">
      
    <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
        <nav class="f6 fw6 ttu tracked">
        <div>
          <ul id='flexstart' class="snip1226">
            <li><a href="#" data-hover="Home" className='pr5 pl5'>Home</a></li>
            <li><a href="#" data-hover="About Us">About Us</a></li>
            <li><a href="#" data-hover="Blog">Blog</a></li>
            <img src={logo} height="125px" className='zindex' />
          </ul>
          <div id='flexend'>
          <ul id='flexend' class="snip1226">
            <li><a href="#" data-hover="Home" className='centernav'>Home</a></li>
            <li><a href="#" data-hover="About Us">About Us</a></li>
            <li><a href="#" data-hover="Blog">Blog</a></li>
          </ul>
          </div>    
        </div>
        </nav>
      </header>
        
    </div>;
}
export default Navbar;

Реагировать

Я пытаюсь центрировать элементы списка по горизонтали, но независимо от того, что я делаю с CSS, он остается таким.Я знаю, что это как-то связано с flex-end и flex-start, но я не могу понять, как это отцентрировать.Я пробовал оба свойства align и justify, но он, похоже, ничего не делает.

Я также хотел бы добавить, что я хочу, чтобы все элементы были в одном ряду, который центрирован в пределах панели навигации.Я должен оставить место между ними, потому что логотип идет посередине.

Answer 1

Для горизонтального центрирования содержимого ваших списков (меню) это должно быть достигнуто путем внесения следующих изменений в ваш CSS:

#flexstart {
  display: flex;
  /* justify-content: flex-start; Remove */
  justify-content: center;
  align-items: center;
}

#flexend {
  display: flex;
  /* justify-content: flex-end; Remove */
  justify-content: center;
  align-items: center;
}

Для работающего jsFiddle, см. Эту ссылку (обратите внимание, я установил фон на черный, чтобы сделать содержимое видимым)

Обновление # 2

Для центрирования по вертикали вы можете сделать следующие настройки:

CSS:

/* Add this rule */
#flex-wrap {
  display:flex;
  flex-direction:row;
  justify-content:center;
}

ul {

  padding:0;
  margin:0;
}

HTML:

<nav class="f6 fw6 ttu tracked">

  <!-- UPDATE add id flex-wrap -->
  <div id="flex-wrap">

    <ul id='flexstart' class="snip1226">
      <li><a href="#" data-hover="Home" className='pr5 pl5'>Home</a>

Недавно обновленный jsFiddle # 2 здесь