如何使 flexbox 在移动设备中响应？答案

【问题标题】：how do make flexbox responsive in mobile?如何使 flexbox 在移动设备中响应？
【发布时间】：2020-07-23 02:28:18
【问题描述】：

如何让这个 flexbox 响应移动设备？即检测到屏幕宽度后的列方向的所有元素。

另外，让字体大小也响应？

这是我的 CSS：

.do-flex {
  display: flex;
  flex-wrap: wrap;
  //box-sizing: border-box;
}

.do-flex  > div {
  max-width: 200px;
  background: #e0ddd5;
  margin: 2%;
}

<div class="do-flex">
  <div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iste, aut praesentium recusandae quisquam ut fugit minus distinctio beatae architecto?</div>
    <div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iste, aut praesentium recusandae quisquam ut fugit minus distinctio beatae architecto?</div>
      <div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iste, aut praesentium recusandae quisquam ut fugit minus distinctio beatae architecto?</div>  <div class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iste, aut praesentium recusandae quisquam ut fugit minus distinctio beatae architecto?</div>
</div>

我应该为此使用 max-width 吗？

【问题讨论】：

标签： html css flexbox grid

【解决方案1】：

// HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel ="stylesheet" href="main.css">
    <script src="main.js"></script>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item" id="open" data-expanded=true>
            <div class = "column-header">Open</div>
            <div class = "card">
                <div class = "card-title">Aufgabe 1</div>
                <div class = "card-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
                    labore et dolore magna aliquyam erat, sed diam voluptua.
                </div>
            </div>
        </div>
        <div class="flex-item" id="inProgress" data-expanded=true>
            <div class="column-header">In Progress</div>
            <div class = "card">
                <div class = "card-title">Aufgabe 2</div>
                <div class = "card-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
            </div>
            <div class = "card">
                <div class = "card-title">Aufgabe 4</div>
                <div class = "card-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
            </div>
        </div>
        <div class="flex-item" id="done" data-expanded=true>
            <div class="column-header">Done</div>
            <div class = "card">
                <div class = "card-title">Aufgabe 3</div>
                <div class = "card-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
                    labore et dolore magna aliquyam erat,
                </div>
        </div>
    </div>
</body>

</html>

// CSS 代码

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  background-color: khaki;
}

.flex-item {
  background-color: lightgreen;
  border: lightgray;
  margin: 3px;
  max-width: 20rem;
}

.flex-item[data-expanded="false"] {
  flex: 0 auto;
  writing-mode: vertical-lr;
  min-width: 0px;
}

.column-header {
  border-bottom: medium mediumblue solid;
  background-color: cadetblue;
}

.column-header:hover {
  cursor: pointer;
}

[data-expanded="false"] > .card .card-content,
[data-expanded="false"] > .card .card-title {
  display: none;
}

[data-expanded="false"] > .column-header {
  border: none;
  border-right: medium mediumblue solid;
  background-color: cadetblue;
}

.card {
  border: thin black solid;
  border-radius: 5px;
  margin: 2px;
  padding: 2px;
}

[data-expanded="false"] > .card {
  border: none;
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-item[data-expanded="false"] {
    writing-mode: horizontal-tb;
    flex: 0 auto;
  }
  [data-expanded="false"] > .column-header {
    border: none;
    border-bottom: medium mediumblue solid;
  }
}

//JS代码

window.onload = function() {
  const nodes = document.querySelectorAll(".flex-item");
  console.log(nodes);
  for (const node of nodes) {
    node.addEventListener("click", function(elem) {
      switchExpand(elem);
    });
  }
};

function switchExpand(elem) {
  const isExpanded = JSON.parse(
    elem.target.parentNode.getAttribute("data-expanded")
  );
  console.log(elem);
  elem.target.parentNode.setAttribute("data-expanded", !isExpanded);
}

【讨论】：

【解决方案2】：

使用媒体查询进行响应式设计：

@media only screen and (max-device-width: 480px) {
  flex-direction: column;
  font-size: whatever font-size you want
}

然后在媒体查询中调整您想要的任何值。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

【讨论】：

:D，我们应该使用 order 来制作像上图一样的网格吗？？
你是什么意思？
像上面那样制作网格，我在上面的css中提到的只是每个项目的网格，不像上面那样
如果没有您的其余代码，我真的无法提出更多建议。您能在jsfiddle.net 上发布一个工作示例吗？