使用flexbox为li元素添加边框分隔

Question

每当我将柔性版拉伸或宽度100％应用于礼品时，它们会被推到页面左侧的柔性开始位置，而不是居中。

＆＃13;

＆＃13;

 body {
   margin: 0;
 }
 ul,
 li,
 a {
   text-decoration: none;
   list-style-type: none;
   padding: 0;
 }
 .site-wrapper {
   min-height: 100vh;
 }
 .main-header,
 .main-nav {
   display: flex;
 }
 .main-nav {
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   margin: 0;
 }
 .main-nav li {
   margin-bottom: 5%;
 }
 .mobile-nav-wrapper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 .toggle-mobile-nav {
   border: 1px solid black;
   height: 30px;
   width: 30px;
   align-self: center;
   margin-right: 2.5%;
   border-radius: 10%;
   padding: 1%;
 }
 .toggle-mobile-nav:hover {
   cursor: pointer;
 }
 #logo {
   margin-left: 20%;
   cursor: pointer;
 }
 .fa-lg {
   margin-top: .15em;
   font-size: 1.9em;
   margin-left: .05em;
 }
 .intro {
   display: flex;
   flex-direction: column;
   padding-left: 2.5%;
   padding-right: 2.5%;
   align-items: center;
   background-color: #38A5DB;
 }
 .intro h1 {
   padding-top: 10%;
 }
 .intro h3 {
   padding-bottom: 5%;
 }
 .intro-image {
   max-width: 100%;
 }

＆＃13;

<div class="site-wrapper">
  <div class="mobile-nav-wrapper">
    <li>
      <h1 id='logo'>JP</h1>
    </li>
    <div class="toggle-mobile-nav">
      <i class="fa fa-bars fa-lg"></i>
    </div>
  </div>
  <header class="main-header">
    <!-- Main Header Start -->

    <ul class="main-nav">
      <li><a href="#">About Me</a>
      </li>
      <li><a href="#">My Work</a>
      </li>
      <li><a href="#">Playground</a>
      </li>
      <li><a href="#">Contact Me</a>
      </li>
    </ul>
  </header>
  <!-- Main Header end -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

align-items:center导致li缩小换行而不是拉伸（这是默认值）。

请将其删除并使用text-align:center上的li。

＆＃13;

＆＃13;

ul,
li,
a {
  text-decoration: none;
  list-style-type: none;
  padding: 0;
}
.main-header,
.main-nav {
  display: flex;
}
.main-nav {
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.main-nav li {
  margin-bottom: 5%;
  background: lightgreen;
  text-align: center;
}
.main-nav li a {
  display: block;
}

＆＃13;

<ul class="main-nav">
  <li><a href="#">About Me</a>
  </li>
  <li><a href="#">My Work</a>
  </li>
  <li><a href="#">Playground</a>
  </li>
  <li><a href="#">Contact Me</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;