在flexbox中组合行和列

Question

我在article中有三个元素：照片，类别，然后是帖子信息。

我试图弄清楚如何让posts元素叠加在帖子信息列的顶部（＃3顶部的＃2，如果你正在查看附加的照片）所以它看起来像两个50％的列即使有三个flex元素。

.flexbox {
  display: flex;
}
.featured-image {
  flex: 1;
}
.post-categories {} 
.post-info {
  flex: 1;
}

<article class="flexbox">
  <div class="featured-image" style="background-image: url(img.jpg);"></div>
  <ul class="post-categories">
    <li><a href="/category">Category</a>
    </li>
  </ul>
  <div class="post-info">
    <header>
      <h3 class="post-title"><a href="/post">Post Title</a></h3>
      <p class="timestamp">Posted 1 month ago</p>
    </header>
  </div>
</article>

Answer 1

我在你要堆叠的两件东西周围放了一个包装器div。然后你可以使用flex将那个包装器放在＃1旁边，并使用里面的包装器来堆叠＃2和＃3。

＆＃13;

＆＃13;

.flexbox {
    display: flex;
}

/* stack 1 next to .post-meta, containing 2 and 3 */
.featured-image,
.post-meta {
  flex: 1;
}

/* stack 2 and 3 inside .post-meta */
.post-meta {
  display: inline-flex;
  flex-direction: column;
}


/* these styles are mostly for demo purposes;
 * adjust or remove as needed */

.post-categories, 
.post-info {
  padding: 10px;
  list-style: none;
  margin: 0;
}

.featured-image {
  background-color: skyblue;
 }

.post-categories { background: #ccc; }
.post-info { background: #ddd; }

＆＃13;

<article class="flexbox">
    <div class="featured-image" style="background-image: url(img.jpg);"></div>
    <div class="post-meta">
    <ul class="post-categories">
        <li><a href="/category">Category</a></li>
    </ul>
    <div class="post-info">
        <header>
            <h3 class="post-title"><a href="/post">Post Title</a></h3>
            <p class="timestamp">Posted 1 month ago</p>
        </header>
    </div>
   </div>
</article>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在容器中包装元素＃2（类别）和＃3（帖子信息）。然后，此容器成为元素＃1（照片）的兄弟flex项目。

或者，将.flexbox { display: flex; } #nested-flex-container { display: flex; flex-direction: column; flex: 1; } .featured-image { flex: 1; } .post-categories { flex: 1; } .post-info { flex: 1; } /* non-essential decorative styles */ .flexbox {border: 1px solid black; text-align: center;} .post-info {background-color: lightgray;} .post-categories {background-color: lightgreen; padding: 0; margin: 0; list-style-type: none;}与<article class="flexbox"> <div class="featured-image" style="background-image: url(img.jpg);">Photo</div> <div id="nested-flex-container"> <ul class="post-categories"> <li><a href="/category">Category</a></li> </ul> <div class="post-info"> <header> <h3 class="post-title"><a href="/post">Post Title</a></h3> <p class="timestamp">Posted 1 month ago</p> </header> </div> </div> </article>一起添加到此新容器中。 （虽然我建议这样做，因为它可以控制大小和与flex属性的对齐，但这部分是可选的，因为块元素将垂直堆叠）。

现在您的布局包含一行，有两个弹性列，右侧列有两个垂直堆叠的子元素，高度与左列相等。

＆＃13;

＆＃13;

###############
PSZ1 G096.89+24.17
PSZ1 G108.18−11.53
RXC J0225.1−2928
RXC J1053.7+5452
RXC J1234.2+0947
RXC J1314.4−2515
S 1081
ZwCl 0008.8+5215
ZwCl 2341+0000
1E 0657−558
1RXS J0603.3+4214
24P 73

＆＃13;

import numpy as np
a =np.genfromtxt("t.txt", comments="#", dtype=None,autostrip=True,delimiter = " ")

＆＃13;

＆＃13;

＆＃13;