在同一个容器中对齐不同高度的弹性项目 [英] Align flex items with different heights in the same container

问题描述

我想知道是否有可能将 flex 项目与同一容器中的较大 flex 项目水平对齐.使用 CSS 浮动可以轻松完成，但我无法使用 flex 项目完成.

查看此 JSFiddle 以获取 flexbox 示例.

查看此 JSFiddle 浮点示例

网格布局

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

<div class="small-flex-item">

CSS

 .flex-container {显示:弹性；弹性方向:行；flex-wrap: 包裹;对齐项目:flex-start；最大宽度:500px；右边距:自动；左边距:自动；}.small-flex-item {弹性基础:33.333%；背景:#000；填充顶部:30%；}.large-flex-item {弹性基础:66.667%；背景:#333；填充顶部:60%；}

解决方案

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

HTML

<div class="large-flex-item"></div><!-- flex item #1 --><div class="flex-container-inner"><!-- flex item #2 &嵌套的 flex 容器 --><div class="small-flex-item"></div><!-- 这个 flex item 和兄弟元素将对齐... --><div class="small-flex-item"></div><!-- ... 在 .large-flex-item 旁边的列中 -->

CSS

 .flex-container {显示:弹性；宽度:500px；右边距:自动；左边距:自动；}.large-flex-item {弹性基础:66.667%；高度:200px；背景:#333；}.flex-容器内{显示:弹性；弹性方向:列；弹性增长:1；}.small-flex-item {弹性基础:100%；高度:100px；背景:#000；}

演示

I wonder if it's possible to get flex items horizontally aligned to larger flex items in the same container. Using CSS floats it would be easily accomplished, but I haven't been able to get it done with flex items.

View this JSFiddle for a flexbox example.

View this JSFiddle a float example

Grid layout

<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%;
 }

解决方案

You can achieve the layout by nesting flex containers.

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

这篇关于在同一个容器中对齐不同高度的弹性项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！