Question

我有一个简单的3列结构，其中包括一个后退按钮，一个 main 内容页面和一个 forward 按钮：

// Implement a function to create OverlayEntry
OverlayEntry getMyOverlayEntry({
  @required BuildContext context,
  SomeData someData,
}) {
  return OverlayEntry(
      builder: (context) {
        return AlertDialog(child: SomeWidgetAgain());
      }
  );
}

// In the widget where you want to support long press feature
OverlayEntry myOverayEntry;

GestureDetector(
    onLongPress: () {
      myOverayEntry = getMyOverlayEntry(context: context, someData: someData);
      Overlay.of(context).insert(myOverayEntry);
    },
    onLongPressEnd: (details) => myOverayEntry?.remove(),

    child: SomeWidgerHere(),
)

current result on a large screen

在较小的屏幕（例如电话）上，我希望主内容按钮位于顶部，而后退按钮和下一个按钮位于下面的一行中（后退在左边，下一个在右边）。

expected result on a smaller screen

我尝试过“ order-1”和“ order-12”，但是没有运气。有什么建议吗？

Answer 1

理想情况下，您想自己尝试一下。我知道对CSS感到沮丧（我在那里也很久以前就问过类似的问题）。

.container {
  display: flex;
  flex-flow: row nowrap;
}

@media screen and (max-width: 480px;){
  .container{
    flex-flow: column;
  }
}

这应该可以，但是我建议您尝试to learn flexbox

Answer 2

<html lang="en">
<head>
  <title>Document</title>
</head>
<style>
  #btn1 {
    float: left;
  }
  #btn2 {
    float: right;
  }
  #main {
    height: 300px;
    background-color: #ffe500;
  }
</style>
<body>
  <div id="main">
    main content
  </div>
  <div id="btn">
    <button id="btn1">Back</button>
    <button id="btn2">Next</button>
  </div>
</body>
</html>```

使用Flex和CSS订购DIV

2 个答案: