CSS flex：列。不占父母的全宽

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; }

我希望能够添加其他选项，让我们说群组，以便我.nav > li为flex-direction: column，但如果我尝试这样做div inside不占用父级的全宽（li）。

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

当列表为div时，如何让孩子.nav > li（在flex-direction:column;内）填充父元素。

Answer 1

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

而不是活动项目上的margin-left，我给了它一个border-left: 10px solid #1879C7，因为边距会打破box-sizing: border-box;

详细了解Mozilla Developer Network的box-sizing媒体资源。请参阅下面的演示。

＆＃13;

＆＃13;

  .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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;