Question

我最近一直在接触Flex的表面，以尝试获得一些时髦的布局。

但是我遇到了我的div不能识别宽度的问题吗？

我正在尝试将每行的第一个div设置为5％，以便它们都沿左侧对齐。

我试着给他们5％和5vw只是为了看看有什么会改变但没有运气。

我会组织课程，但只是想让它首先工作。

父div的宽度也为100％，因此它具有引用。

我的HTML

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
  <style type="text/css">
    /* Grid styles */
    
    .column {
      /*flex-basis: 100%;*/
    }
    
    @media screen and (min-width: 800px) {
      .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
      }
      .column {
        flex: 1;
      }
      ._25 {
        flex: 2.5;
      }
      ._5 {
        flex: 5;
      }
    }
    /**
    {
      border: 1px dashed red;
    }*/
  </style>
</head>

<body>
  <!-- Personal user row -->
  <div class="row" style="height: 30vh; border-bottom: 1px solid black; width: 100%;">
    <div class="column" style="background-color: pink; width: 5%; display: flex; justify-content: center; align-items: center;">
      <span style="font-size: 18pt" class="fa fa-user">&nbsp;</span>
    </div>
    <div class="column" style="background-color: red; justify-content: center; align-items: center; padding-top: 1em;">
      <div>&nbsp;</div>
    </div>
  </div>

  <!-- User info/Settings row -->
  <div class="row" style="height: 30vh; border-bottom: 1px solid black; width: 100%;">
    <div class="column" style="background-color: purple; width: 5%; display: flex; justify-content: center; align-items: center;">
      <span style="font-size: 18pt" class="fa fa-cog">&nbsp;</span>
    </div>
    <div class="column" style="background-color: red; padding-top: 1em;">&nbsp;</div>
    <div class="column" style="background-color: red; padding-top: 1em;">&nbsp;</div>
  </div>

  <!-- Messages/Chat row -->
  <div class="row" style="height: 25vh; width: 100%;">
    <div class="column" style="background-color: salmon; width: 5%; display: flex; justify-content: center; align-items: center;">
      <span style="font-size: 18pt" class="fa fa-comment">&nbsp;</span>
    </div>
    <div class="column" style="background-color: red; padding-top: 1em;">
      <div>&nbsp;</div>
      <div>&nbsp;</div>
    </div>
  </div>
  <!-- End Main Body Area -->
</body>

</html>

Answer 1

在flexbox中，您可以尝试使用其他方法来代替设置宽度。

列的宽度是自己划分的，可以使用flex: 0 0 5%;

这样的伸缩样式来覆盖列的宽度

它可以描述为

flex: <flex-grow> <flex-shrink> <flex-basis>;

这是flex-grow，flex-shrink和flex-basis组合的简写方式

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Answer 2

请检查以下工作示例，根据您的代码，将列的宽度设置为flex: 0 0 5%;而不是width: 5%。

@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-bottom: 1px solid black;
    width: 100%;
  }
  .column {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .h-30vh {
    height: 30vh;
  }
  .w-5per {
    -ms-flex: 0 0 5%;
    flex: 0 0 5%;
    max-width: 5%;
    justify-content: center;
    align-content: center;
  }
  .bg-pink {
    background-color: pink;
  }
  .bg-purple {
    background-color: purple;
  }
  .bg-red {
    background-color: red;
  }
  .bg-salmon {
    background-color: salmon;
  }
  .column span {
    font-size: 18pt;
    display: flex;
  }
  .d-flex {
    display: flex;
  }
  .pt-1em {
    padding-top: 1em;
  }
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row h-30vh">
  <div class="column bg-pink w-5per">
    <span class="fa fa-user">&nbsp;</span>
  </div>
  <div class="column bg-red">
    <div>&nbsp;</div>
  </div>
</div>

<!-- User info/Settings row -->
<div class="row h-30vh">
  <div class="column bg-purple w-5per">
    <span class="fa fa-cog">&nbsp;</span>
  </div>
  <div class="column bg-red d-flex">&nbsp;</div>
  <div class="column bg-red d-flex">&nbsp;</div>
</div>

<!-- Messages/Chat row -->
<div class="row h-25vh bg-salmon">
  <div class="column w-5per">
    <span class="fa fa-comment">&nbsp;</span>
  </div>
  <div class="column bg-red pt-1em">
    <div>&nbsp;</div>
    <div>&nbsp;</div>
  </div>
</div>

Answer 3

只需尝试使用最大宽度或最小宽度代替宽度

为什么我的DIVS对我给它们的任何宽度都没有反应？

3 个答案: