如何构建具有复杂布局的 UL LI as 卡（包括示例）？

Question

我正在尝试在

ul li

列表中构建一张“卡片”。此卡片应具有响应性。因此我的核心思想是使用

CSS Flexbox

。我已经在 codepen.io 开始了一支笔，但现在已经为实现这一目标而苦苦挣扎了好几天。为什么我不能轻松地将这些 div 与 flexbox 对齐？

它应该是这样的：

这是笔： https://codepen.io/bogazci/pen/WNayNXb?editors=1100

HTML

<ul class="packs-list">
  <a href="#">
    <li class="pack">
      <div class="pack-sku">B01-102 102<br>ordered on 14th may 23</div>
      <div class="pack-card">
        <h2 class="pack-title">Customer Engagement</h2>
        <div class="pack-description">This is the descriptin for the.</div>
        <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
      </div>
    </li>
  </a>
</ul>

CSS

.pack-sku {
  background-color: red;
  white-space: nowrap;
  transform: rotate(-90deg);
} 

.pack-card {
  background-color: brown;
} 

.pack {
  background-color: green;
  width: 100%;
} 

.packs-list {
  background-color: yellow;
} 

ul {
  display: flex;
  list-style-type: none;
  list-style-position: inside;
  margin:0;
  padding:0;
}

li {
  display: flex;
margin:0;
  padding:0;
}

.pack-card {
  display: flex;
}

Answer 1

仍然根据该元素的

height

对齐

您可以使用

aspect-ratio: 1 / 1;

和否定

margin

例子：

.pack-sku{
  ...
  aspect-ratio: 1 / 1
  ...
}
.pack-card {
  background-color: brown;
  margin: -150px; /* example */
}

但是我建议你使用javascript

像这样的东西：

HTML

<ul class="packs-list">
  <a href="#">
    <li class="pack">
      <div class="pack-sku">
        <!-- NEW -->
        <span>B01-102 102<br>ordered on 14th may 23</span>
      </div>
      <div class="pack-card">
        <h2 class="pack-title">Customer Engagement</h2>
        <div class="pack-description">This is the descriptin for the.</div>
        <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
      </div>
    </li>
  </a>
</ul>

CSS

.pack-sku {
  position: relative;
  background-color: red;
}
.pack-sku > span{
  position: absolute;
  display: block;
  white-space: nowrap;
  transform: rotate(-90deg);
  left: 0;
  bottom: 0;
  right: 0;
} 

JavaScript

document.querySelector('.pack-sku').style.width = document.querySelector('.pack-sku span').offsetHeight + 'px';

document.querySelector('.pack-sku').style.height = document.querySelector('.pack-sku span').offsetWidth + 'px';

Answer 2

在句法上，

ul

元素只能包含

li

元素，而

li

可以包含任何元素。我更正了 HTML 以反映这一点。

不清楚你的目标是像你一样使用 Flexbox 布局，所以我从头开始重新创建你的 CSS。

CSS 有注释，这里不再赘述，但Flexbox Layout 的技巧是区分各种列和行父容器以及哪些子项目应该允许/强制增长/收缩。

作为奖励，我添加了一些“响应性”解决方案和一些您可以摆弄的悬停效果：

body { font-size }

、

@media

和

pack:hover

/

pack:hover>a

.

A Codepen 你可以分叉...

/* makes padding+border part of total element size */
* { box-sizing: border-box }

:root {
    /* Define a few values for general use */
    --pad: 0.5rem; /* generic padding */
    --bd : 3px;    /* border size */
}

body {
    margin: 0; /* Remove HTML default spacing */

    padding: calc(2 * var(--pad));
    font-size: calc(0.625vmin + 0.75rem); /* Responsive font */

    background-color: #efefef;
}

.list {
    /* Remove HTML defaults */
    list-style-type: none;
    margin: 0; padding: 0;
}

/******************/
/* Flexbox Layout */
/******************/
/* Flexbox parent containers */
.list, .pack>a, .pack-card { display: flex }
.list, .pack>a             { flex-flow: row wrap }
.pack-card                 { flex-flow: column wrap; justify-content: space-between }
.list                      { justify-content: center }

/* Flexbox child items */
.pack-sku, .pack-card,
.pack-description          { flex: 1 } /* allow to stretch to fill parent */

/* Flexbox spacing */
.list                      { gap: calc(2 * var(--pad)) }
.pack>a, .pack-card        { gap: var(--pad) }

/**********************/
/* Sizing and Styling */
/**********************/
/* All classes containing ... */
[class*="pack"] { padding: var(--pad) }

.pack {
/*    max-width: min(24rem, 100%); /* toy with this */

    background-color: White;
    border: var(--bd) solid #aaa;
    color: #444;
}
.pack:hover {
    border-color: Black;
    color: Black;
}

.pack>a {
    text-decoration-style: wavy;
    text-decoration-color: #e8e8e8;
    color: currentColor;
}
.pack:hover>a {
    text-decoration-style: solid;
    text-decoration-color: Black;
}

.pack-sku {
    white-space: nowrap;
    border: var(--bd) solid #c4590f;
}

/* Make vertical textbox when space allows */
@media all and (min-width: 360px) {
    .pack-sku {
        flex: 0; /* disable fill parent size */

        /* Rotate writing direction and element */
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        transform: rotate(180deg);

        text-align: right;
    }
}

.pack-card        { border: var(--bd) solid #2c74b4 }
.pack-title       { border: var(--bd) solid #febf01; font-size: 1.5em; font-weight: bold }
.pack-description { border: var(--bd) solid #6fac45 }
.pack-information { border: var(--bd) solid #fe0000 }

<ul class="list">
    <li class="pack">
        <a href="javascript:void(0)">
            <div class="pack-sku">B01-102 102<br>ordered on 14th may 23</div>
            <div class="pack-card">
                <div class="pack-title">Customer Engagement</div>
                <div class="pack-description">This is the description for the...</div>
                <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
            </div>
        </a>
    </li>
    <li class="pack">
        <a href="javascript:void(0)">
            <div class="pack-sku">B01-102 102<br>ordered on 14th may 23</div>
            <div class="pack-card">
                <div class="pack-title">Customer Engagement</div>
                <div class="pack-description">This is the description for the...</div>
                <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
            </div>
        </a>
    </li>
    <li class="pack">
        <a href="javascript:void(0)">
            <div class="pack-sku">B01-102 102<br>ordered on 14th may 23</div>
            <div class="pack-card">
                <div class="pack-title">Customer Engagement</div>
                <div class="pack-description">This is the description for the...</div>
                <div class="pack-information">This item contains <b>2123</b> elements in <b>231</b> containers.</div>
            </div>
        </a>
    </li>
</ul>