Question

我刚刚尝试学习flexbox布局，因为它似乎可以简化很多事情。

我试图并排获得2列，宽度为1 60％，宽度为30％。

即使我在flex-basis属性中指定宽度，它们也保持相同的大小，在页面上均匀分布。

HTML：

  <article class="fullCol">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>

  <section class="flexWrap">
    <article class="halfCol">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>

    <article class="halfCol">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>

    <!-- Put top and bottom drop shadow on navbar -->
    </section>
</section>

CSS：

  article, section, nav, aside {
    display: block;
  }

  #wrapper {

  }

  .flexWrap {
    display: flex;
    -webkit-flex-flow: row || wrap;
      flex-flow:         row || wrap;
      -webkit-justify-content: center; 
      justify-content:         center;
  }

  .fullCol {
    width: 100%;
    border-bottom: 1px solid black;
    margin: 0px 0px 15px 0px;
    padding: 10px;
    box-shadow: 0 4px 2px -2px gray;
  }

  .halfCol {
    box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
    width: 45%;
    border: 1px solid black;
    margin: 0px 5px 0px 5px;
    padding: 10px;

  }

  .mainCol {
    box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
    border: 1px solid black;
    margin: 0px 5px 0px 5px;
    padding: 10px;
      -webkit-flex-basis: auto | 60%; /* Safari */
    flex-basis:         auto | 60%;
  }

  .sideCol {
    box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
    width: 30%;
    border: 1px solid black;
    margin: 0px 5px 0px 5px;
    padding: 10px;
      -webkit-flex-basis: auto | 30%; /* Safari */
      flex-basis:         auto | 30%;
  }

Answer 1

您需要在您尝试定义-webkit-flex: initial; and flex: initial;的flex子项上使用width。

Flex Width的行为不符合假设

1 个答案: