上一篇: html – 如何使用flexbox并排将d... 下一篇:html – 我是否使用光标手和光标...

html – 在同一容器中对齐不同高度的弹性项目

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – 在同一容器中对齐不同高度的弹性项目，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想知道是否可以将柔性物品水平对齐到同一容器中较大的柔性物品.使用CSS浮动它很容易实现,但我无法使用flex项目完成它.

View this JSFiddle for a flexbox example.

网格布局

<div class="flex-container">
 <div class="large-flex-item">
</div>
<div class="small-flex-item">
 </div>
<div class="small-flex-item">
 </div>
</div>

CSS

.flex-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
   max-width: 500px;
   margin-right: auto;
   margin-left: auto;
 }

 .small-flex-item {
   flex-basis: 33.333%;
   BACkground: #000;
   padding-top: 30%;
 }

 .large-flex-item {
   flex-basis: 66.667%;
   BACkground: #333;
   padding-top: 60%;
 }

解决方法

您可以通过嵌套Flex容器来实现布局.

HTML

<div class="flex-container">

  <div class="large-flex-item"></div><!-- flex item #1 -->

  <div class="flex-container-inner"><!-- flex item #2 & nested flex container -->
     <div class="small-flex-item"></div><!-- this flex item and sibling will align... -->
     <div class="small-flex-item"></div><!-- ... in column next to .large-flex-item -->
  </div>

</div>

CSS

.flex-container {
   display: flex;
   width: 500px;
   margin-right: auto;
   margin-left: auto;
 }

 .large-flex-item {
   flex-basis: 66.667%;
   height: 200px;
   BACkground: #333;
 }

.flex-container-inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.small-flex-item {
   flex-basis: 100%;
   height: 100px;
   BACkground: #000;
 }

DEMO