Question

我正在处理列表中的一些项目：

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
</ul>

我正在尝试使用flexbox将它们分为两列，从而得出以下结果：

+--------------------+
|                    |
| Item1       Item2  |
|                    |
| Item3       Item4  |
|                    |
| Item5       Item6  |
|                    |
| Item7       Item8  |
|                    |
+--------------------+

但是我正在尝试按升序对它们进行排序，因此它看起来像这样：

+--------------------+
|                    |
| Item1       Item5  |
|                    |
| Item2       Item6  |
|                    |
| Item3       Item7  |
|                    |
| Item4       Item8  |
|                    |
+--------------------+

除非我需要在混合中添加一些JS，否则不知道如何使用CSS + Flexbox实现该目标吗？

这是Codepen上的演示：

https://codepen.io/ultraloveninja/pen/drKLzG

Answer 1

使用列flexbox 并设置ul的高度-请参见下面的演示

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  max-width: 150px;
  height: 8em;
}

li {
  margin: 5px;
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
</ul>

或者您可以使用CSS columns-参见以下演示：

ul {
  list-style: none;
  columns: 2; /* added this */
  width: 100%;
  max-width: 150px;
  height: 8em;
}

li {
  margin: 5px;
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
</ul>

Answer 2

您可以尝试添加高度/最大高度并将方向更改为列，也可以使用列规则：

USE TEMPDB

DECLARE @Period INT
SET @Period = YEAR ( '20190101') * 100 + MONTH ('20190101') 

CREATE TABLE #T (CustID INT, OrderInPeriod INT, NumberOfOrders INT)

INSERT INTO #T 
SELECT CustID, 0, 0
FROM Customers

UPDATE #T
SET OrderInPeriod = 1 
FROM Orders AS O
WHERE #T.CustID = O.CustID
  AND YEAR (OrderDate) * 100 + MONTH (OrderDate) = @Period


UPDATE #T
SET NumberOfOrders = ( SELECT COUNT(*) AS Cnt FROM Orders AS O
                       WHERE #T.CustID = O.CustID
                         AND OrderDate > DATEADD (YEAR, -1, '20190101')

或：

ul {
  list-style:none;
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
  width: 100%;
  max-width: 150px;
  max-height: 130px;
}

Answer 3

我假设您正在使用flexbox，以便容器将沿宽度方向扩展以在水平方向包含尽可能多的项目；在这种情况下，flex-direction:column将不起作用。您可以签出https://www.w3schools.com/css/css3_multiple_columns.asp

支持是轻率的，但这是唯一可以做您想要的事情（这就是为什么需要引入它的原因）：https://caniuse.com/#search=column

Flexbox列按升序排列

3 个答案: