在不同的柔性容器中柔性物品的高度相等的列
我在创buildFlexbox响应式网格时遇到问题，希望能有人指出我正确的方向。
我希望所有.block div的高度相等，而.bottom div完全位于底部。 这实际上是在当前的解决scheme，但是当h2标题太长，达到2行，我希望该行的所有h2标题是相同的高度 。
这在某种程度上可能吗？
我做了一个Codepen来说明这个问题： http ://codepen.io/kenvdbroek/pen/eZKdEQ
h1, h2, h3 { margin: 0; } body { margin: 0; padding: 0; } ul.clean-list { margin: 0; padding: 0; } ul.clean-list li { list-style: none; margin-bottom: 5px; } li:last-child { margin-bottom: 0; } .container { padding-top: 50px; } .block { margin-bottom: 30px; border: 1px solid red; } .block > .bottom { border: 1px solid blue; } @media only screen and (min-width: 480px) { .row.row-flex-wrapper::before, .row.row-flex-wrapper::after { content: none !important; } .row.row-flex-wrapper::after { clear: none; } .row.row-flex-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; } .row.row-flex-wrapper .column { display: -webkit-flex; display: -ms-flexbox; display: flex; float: none; border: 1px solid orange; } .row.row-flex-wrapper .column > .block { display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; } .row.row-flex-wrapper .column > .block > .block-list { flex: 1 0 auto; -ms-flex: 1 0 auto; -webkit-flex: 1 0 auto; } .row.row-flex-wrapper .column > .block > h2 {} } @media only screen and (min-width: 480px) and (max-width: 767px) { .container .row .column { width: 50%; } }
<div class="container"> <div class="row row-flex-wrapper"> <div class="column col-sm-6 col-md-4"> <div class="block"> <h2>Title 1</h2> <div class="block-list"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="bottom"> <ul class="clean-list"> <li><a href="/button">Some link</a> </li> <li><a href="/button">Some link 2</a> </li> </ul> </div> </div> </div> <div class="column col-sm-6 col-md-4"> <div class="block"> <h2>Another very long title which is actually toooo long...</h2> <div class="block-list"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer...</p> </div> <div class="bottom"> <ul class="clean-list"> <li><a href="/another-button">Another button</a> </li> </ul> </div> </div> </div> <div class="column col-sm-6 col-md-4"> <div class="block"> <h2>Title</h2> <div class="block-list"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy text...</p> </div> <div class="bottom"> <ul class="clean-list"> <li><a href="/button">Very nice link</a> </li> </ul> </div> </div> </div> <div class="column col-sm-6 col-md-4"> <div class="block"> <h2>This block is cool!</h2> <div class="block-list"> <p>Some text here. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy text...</p> </div> <div class="bottom"> <ul class="clean-list"> <li><a href="/button">Another link</a> </li> <li><a href="/button">Check this item</a> </li> </ul> </div> </div> </div> <div class="column col-sm-6 col-md-4"> <div class="block"> <h2>Title Block</h2> <div class="block-list"> <p>Go check out this item... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy text...</p> </div> <div class="bottom"> <ul class="clean-list"> <li><a href="/button">Button</a> </li> </ul> </div> </div> </div> <div class="column col-sm-6 col-md-4"> <div class="block"> <h2>Buttonssssss</h2> <div class="block-list"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="bottom"> <ul class="clean-list"> <li><a href="#button">Button</a> </li> </ul> </div> </div> </div> <div class="column col-sm-6 col-md-4"> <div class="block"> <h2>Title</h2> <div class="block-list"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="bottom"> <ul class="clean-list"> <li><a href="/button">Link to item</a> </li> <li><a href="/button">Link to item</a> </li> </ul> </div> </div> </div> <div class="column col-sm-6 col-md-4"> <div class="block"> <h2>Title</h2> <div class="block-list"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="bottom"> <ul class="clean-list"> <li><a href="/button">Link to item</a> </li> </ul> </div> </div> </div> <div class="column col-sm-6 col-md-4"> <div class="block"> <h2>Another very very very very very very very long title</h2> <div class="block-list"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="bottom"> <ul class="clean-list"> <li><a href="/button">Button to item</a> </li> </ul> </div> </div> </div> </div> </div>
简答
不，这是不可能的与flexbox。 考虑CSS网格布局或JavaScript。
说明
flex容器的初始设置是align-items: stretch 。 这会导致弹性项目扩大横轴的全长。 这就是所谓的“柔性等高柱” 。
请注意以下几点：
-
等高栏只适用于柔性容器的儿童 。 换句话说，弹性项目必须具有相同的父项。 否则，平等高度function不适用。
你的问题：
我希望行的所有
h2标题都是相同的高度。 这在某种程度上可能吗？不与CSS。 因为
h2存在于不同的容器中，所以它们不是兄弟姐妹（它们更像堂兄弟），所以平等的高度不适用。 -
柔性盒中的等高柱仅适用于一条柔线。 其他线上的项目，通过包装创build，build立自己的等高线。 这意味着等高柱不适用于多线柔性容器 。
-
align-self属性可以在单独的flex项目上使用，以覆盖align-items，这可能会破坏平等高度的function。 -
通过指定Flex项目上的高度（例如
height: 300px），align-items和align-self将被覆盖，并忽略等高设置。 -
这篇文章重点介绍一个带有
flex-direction: row的容器flex-direction: row。 如果容器是flex-direction: column，那么相等的高度变成相等的宽度 。 这里有一个详细的审查： 使柔性项目采取内容宽度，而不是父容器的宽度
有关：
- 柔性容器中的高度相等的行
- 如何在Flexbox中禁用相同高度的列？
将高度添加到h2：
h2{ height:100px; }
看看这个钢笔，如果这是你的意思： http : //codepen.io/Debabrata89/pen/KzeNVJ
