html - CSS flex :column. 不占用父级的全宽

Question

我有一个带有列表项的垂直导航栏:

<ul class="nav">
    <li>
      <div>
        <i class="fa fa-tachometer"></i>
        <a href="#" class="noselect">Dashboard</a>
      </div>
    </li>
    <li>
      <div class="act_item">
        <i class="fa fa-users"></i>
        <a class="noselect">Groups</a>
        <span class="arrow_right"></span>
      </div>
    </li>
    <li>
      <div>
        <i class="fa fa-archive"></i>
        <a class="noselect">Projects</a>
        <span class="arrow_right"></span>
      </div>
    </li>
    <li>
      <div>
        <i class="fa fa-cogs"></i>
        <a class="noselect">Settings</a>
      </div>
    </li>
  </ul>

CSS:

  .left .nav {
margin-top: 1em;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
position: relative; }
.left .nav li {
  position: relative;
  cursor: pointer;
  background: #1879C7;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  border-top: 2px solid #4D5A63; }
  .left .nav li:last-child {
    border-bottom: 2px solid #303E47; }
  .left .nav li:hover > div {
    margin-left: 0.5em; }
  .left .nav li div {
    position: relative;
    -moz-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    height: 30px;
    padding: 0.5em;
    background: #243139; }
    .left .nav li div i {
      position: relative;
      padding-top: 5px; }
    .left .nav li div a {
      position: inherit;
      margin: auto 1em auto 0.5em;
      font-size: 18px;
      color: #F4F4F4; }
    .left .nav li div .arrow_right {
      margin: auto 0 auto auto; }
  .left .nav li .act_item {
    margin-left: 0.5em; }

我希望能够添加额外的选项让我们说 Groups 所以我想将 .nav > li 作为 flex-direction: column ，但如果我尝试为此，内部的 div 不会占用父级的整个宽度 (li)。

我试图让子 div 具有 width:100%; 但它溢出了容器并且看不到箭头。

当列表为 flex-direction:column;

如何让子 div(在 .nav > li 内)填充父元素；.

Answer 1

我希望这就是您所追求的。您可以将宽度设置为 100%; 并使用 box-sizing: border-box; 以不打破内容。

我给它一个 border-left: 10px solid #1879C7，而不是事件项上的 margin-left，因为边距会破坏 框大小:边框框；

在 Mozilla Developer Network 阅读有关 box-sizing 属性的更多信息.请参阅下面的演示。

  .left .nav {
    margin-top: 1em;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    position: relative;
  }
  
  .left .nav li {
    position: relative;
    cursor: pointer;
    background: #1879C7;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    border-top: 2px solid #4D5A63;
  }
  
  .left .nav li:last-child {
    border-bottom: 2px solid #303E47;
  }
  
  .left .nav li:hover > div {
    margin-left: 0.5em;
  }
  
  .left .nav li div {
    position: relative;
    -moz-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    height: 30px;
    padding: 0.5em;
    background: #243139;
    width: 100%;
    box-sizing: border-box;
  }
  
  .left .nav li div i {
    position: relative;
    padding-top: 5px;
  }
  
  .left .nav li div a {
    position: inherit;
    margin: auto 1em auto 0.5em;
    font-size: 18px;
    color: #F4F4F4;
  }
  
  .left .nav li div .arrow_right {
    margin: auto 0 auto auto;
  }
  
  .left .nav li .act_item {
    border-left: 10px solid #1879C7;
  }

<div class="left">


  <ul class="nav">
    <li>
      <div>
        <i class="fa fa-tachometer"></i>
        <a href="#" class="noselect">Dashboard</a>
      </div>
    </li>
    <li>
      <div class="act_item">
        <i class="fa fa-users"></i>
        <a class="noselect">Groups</a>
        <span class="arrow_right"></span>
      </div>
    </li>
    <li>
      <div>
        <i class="fa fa-archive"></i>
        <a class="noselect">Projects</a>
        <span class="arrow_right"></span>
      </div>
    </li>
    <li>
      <div>
        <i class="fa fa-cogs"></i>
        <a class="noselect">Settings</a>
      </div>
    </li>
  </ul>

</div>