块级元素的作用类似于Flexbox元素

Question

我在尝试创建一个Flexbox手风琴时遇到了一个奇怪的问题。问题是，即使我将显示设置为阻止，有时手风琴的内容也会像flexbox元素一样。最好通过显示示例来描述：

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;适用于包含元素，并告诉它所有孩子现在应该处于灵活上下文中。

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

如果您想要除标题之外的所有元素的flex上下文，您可能希望仅将这些元素包装在另一个容器中，并将那个容器设置为display: flex;，而不是整个主要容器

Answer 2

  

我的预期行为是第1项将在一行而且是   <contents>会在另一条线上。

这不会发生，因为flex-wrap的初始值为nowrap。如果您想要多行，请使用wrap：

item {
  flex-wrap: wrap;
}

＆＃13;

＆＃13;

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

＆＃13;

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;
  flex-wrap: wrap;
  /* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;