css - 像 Flexbox 元素一样的 block 级元素

Question

在尝试创建 flexbox Accordion 时，我遇到了一个奇怪的问题。问题是有时给定 Accordion 的内容会像 flexbox 元素一样，即使我将 display 设置为 block。最好通过示例来描述:

http://codepen.io/jcummins/pen/KpWzNY

$('item div.header').click(function(e){
  $( this ).parent().toggleClass( "active" );
});

body {
  height:100%;
  width:100%;
  background-color: #ccc;
  margin:0;
  padding:0;
}
container {
  display:block;
  position:absolute;
  height: 100%;
  width: 100%;
  /* Formatting styles: safe to remove */ background-color: #999;
}
items {
  height:100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;

  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;

  box-pack:top;
  box-align:center;

  /* Formatting styles: safe to remove */ background-color: #fc0;
}
item {
  display:flex;
  /* Formatting styles: safe to remove */
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  margin-bottom: 6px;
  margin-top: 6px;
  margin-left: 8px;
  margin-right: 8px;
  border-bottom: 3px green solid;
  background:#fff;
  border-radius:5px;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: Arial, sans-serif;
  font-weight:bold;
}
.active {
  -webkit-box-flex: 9;
  -moz-box-flex: 9;
  box-flex: 9;
}
.header {
  display:block;
  width:100%;
}
/* Hide the contents and only show it when the selected menu becomes active */
contents {
  display:none;
  overflow:scroll;
}
.active contents {
  display:block;*/
  /*width:100%;
  overflow:scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<container>
  <items>
    <item>
      <div class="header">Item 1</div>
      <contents>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quos enim explicabo non ipsum dicta minima, architecto, aliquid iusto itaque repudiandae tenetur aliquam nihil odio. Distinctio alias maxime aperiam impedit.</div>
        <div>Quasi aliquam inventore hic veniam nobis nesciunt ratione quod unde, excepturi reprehenderit, error. Fuga tempora excepturi voluptas nihil labore veniam animi! Possimus distinctio ea molestias voluptate aspernatur corrupti porro libero!</div>
        <div>Nostrum deserunt quia modi necessitatibus id ipsum asperiores. Facilis suscipit, nisi culpa veritatis iusto autem iste eos dolore quibusdam ex quis dolorum blanditiis ipsa at architecto earum cum cumque dolor.</div>
        <div>Eaque, libero, nihil. Accusantium corporis id fugit doloremque reiciendis temporibus, cumque minus, aliquid aperiam qui voluptates! Ipsum repudiandae inventore porro iusto mollitia, ex aliquid reiciendis quisquam odit ea, eligendi illo?</div>
        <div>Enim, vitae natus distinctio adipisci rem possimus minus aliquid voluptas corporis velit, ipsa, est eligendi alias veniam fugit eius non hic quibusdam quod placeat dolorum laboriosam, quaerat explicabo. Sint, odio.</div>
      </contents>
    </item>
    <item class="active">
      <div class="header">Item 2</div>
      <contents>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nobis soluta architecto similique molestiae saepe porro accusamus natus ab, eum nihil quidem tempore harum suscipit autem voluptates, quia quae aliquam.</div>
        <div>Dolorum ut mollitia nisi. Sapiente necessitatibus, ducimus minima commodi suscipit dolor modi dolorum ipsa, dolores, aliquid porro neque voluptas a cupiditate blanditiis qui sed est iste dolore eos rerum doloremque!</div>
        <div>Minima itaque ad officia quas dolore expedita, ab hic tempora, enim cum consectetur! Doloribus ut, reiciendis ipsam veniam voluptates, labore voluptatem perferendis earum illo voluptatum inventore a voluptas porro cum?</div>
        <div>Perferendis quasi nesciunt laboriosam debitis veniam quisquam officiis est, cumque ut consectetur quod eligendi odio ab sapiente! Vel laboriosam quisquam odit, doloremque veritatis reiciendis perspiciatis molestiae illum repellendus, velit amet.</div>
        <div>Numquam ipsum, dolorum, nihil perspiciatis aspernatur blanditiis explicabo corporis assumenda dolorem facilis debitis et est fuga sit. Totam, veniam unde soluta rem recusandae explicabo, enim, modi pariatur tempore repellendus quo!</div>
        <div>In, nisi minima ex autem consequatur. Sequi mollitia, velit officiis nisi, eos laudantium quibusdam accusamus dolores dicta tenetur vitae pariatur rem consequatur a praesentium aliquam quidem at fuga eligendi quam!</div>
        <div>Minima minus impedit iste, deleniti asperiores nulla est, nisi optio repudiandae ducimus, corporis aperiam. Quod neque magnam, provident minima minus corporis debitis officiis laborum voluptas consectetur accusantium numquam placeat eum.</div>
        <div>Labore maxime exercitationem, pariatur quaerat, nisi repellat ad reprehenderit modi et sint eum veniam iure odio dignissimos, ullam. Culpa quos, est dolorum dolores asperiores quia commodi laudantium tempora doloribus soluta.</div>
        <div>Aspernatur voluptatem, dolorem vel eligendi. Veritatis, ut eius officia cupiditate dicta quisquam dolores voluptatem, quo saepe. Sequi ducimus quo provident tempore accusamus alias ipsum soluta consequatur quidem, aut, et, dolorum.</div>
        <div>Doloribus beatae excepturi, et sunt libero laborum. Eius perspiciatis vitae, corporis temporibus molestias eum sit dolorum eos a fugit maiores earum suscipit labore, adipisci magnam reiciendis animi rerum culpa inventore.</div>
        <div>Optio itaque fugit dolorum, labore inventore. Illo beatae, quas eius dolorem quasi, quaerat. Voluptatibus laboriosam, laudantium, similique corrupti minus, tempora explicabo atque aspernatur ab, possimus quibusdam adipisci mollitia iste neque.</div>
        <div>Accusamus vel dolorem libero consectetur facere, quo quod maiores, illum enim tenetur! Odio dicta repellendus, earum optio officiis consequatur dolore laboriosam fugit laudantium ad harum distinctio nesciunt accusantium vero, quaerat.</div>
        <div>Eaque voluptatibus excepturi minima fuga ab voluptas ex dolore perspiciatis earum. Fugit eius natus, libero voluptates sunt autem quod consequuntur tempore! Velit rem tenetur est molestias quod quae modi inventore.</div>
        <div>Quasi, quo nulla, hic ut veniam tempora dolorum veritatis eum animi repudiandae nisi eaque numquam temporibus consequatur odio voluptatum obcaecati mollitia neque amet, sunt quidem iure laboriosam eveniet. Quo, quas!</div>
        <div>Officia fuga ipsum ullam deserunt rem praesentium quasi! Alias consectetur esse nobis commodi nam, placeat nesciunt, aspernatur quia asperiores officia fugiat delectus, nulla corporis saepe distinctio culpa aliquid adipisci amet.</div>
      </contents>
    </item>
    <item>Item 3</item>
    <item>Item 4</item>
    <item>Item 5</item>
  </items>
</container>

我预期的行为是第 1 项在一行上，而 <contents>会在另一条线上。相反，它似乎是 50-50 的比例。

具体来说，这条规则似乎没有达到我的预期:

.header {
  display: block;
  width: 100%;
}

Answer 1

display: flex; 应用于包含元素，并告诉它所有的子元素现在都应该在 flex 上下文中。

您的样式规则实际上并未添加任何内容，因为默认情况下 .header 元素已经是 block 元素。

如果您希望所有元素的 flex context header 除外，您可能希望只将这些元素包装在一个额外的容器中，并将 那个 容器设置为display: flex;，而不是整体主容器