Question

我有一个可拖动项目列表，用于响应式设计：

＆＃13;

header,
footer {
  background-color: #5fba7d;
  padding: 1rem;
}

.container {
  display: flex;
  min-height: 800px;
}

.menu {
  width: 15em;
  background-color: #FFF8DC;
}

.content {
  background-color: #fff;
  border-left: 1px solid #958C4D;
  flex: 1;
  padding: 5px 10px;
}

.sortable-list {
  width: 18.75em;
}

.row {
  display: flex;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.row>* {
  display: inline-block;
  border-radius: 4px;
  box-sizing: border-box;
}

.left {
  height: 2em;
  display: flex;
  cursor: move;
}

.handle {
  width: 1.5em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  margin-right: 0.125em;
  border-radius: 4px;
}

.icon {
  width: 2em;
  height: 2em;
  border-radius: 4px;
  background-color: #c97777;
  margin: 0 0.125em;
}

.stretch {
  flex: 1;
  border: 1px solid black;
  padding: 6px 12px;
  margin: 0 0.1em;
}

.trash {
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  margin-left: 0.125em;
}

.bouton-ajout {
  flex: 1;
  border: 1px solid black;
  border-radius: 4px;
  padding: 6px 12px;
  margin: 0 2.2em 0 1.75em;
}


/* mobile layout */

@media (max-width: 768px) {
  .sortable-list {
    width: 100%;
  }
  .menu {
    display: none;
  }
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <header>Header</header>
  <div class="container">
    <div class="menu">

    </div>
    <div class="content">
      <p>asdasd</p>

      <div class="sortable-list">
        <div class="row">
          <div class="left">
            <div class="handle">=</div>
            <div class="icon"></div>
          </div>
          <div class="stretch">
            banana
          </div>
          <div class="trash">X</div>
        </div>
        <div class="row">
          <div class="left">
            <div class="handle">=</div>
            <div class="icon"></div>
          </div>
          <div class="stretch">
            pineapple
          </div>
          <div class="trash">X</div>
        </div>
        <div class="row">
          <div class="left">
            <div class="handle">=</div>
            <div class="icon"></div>
          </div>
          <div class="stretch">
            orange
          </div>
          <div class="trash">X</div>
        </div>

        <div class="bouton-ajout">
          + Add a row V
        </div>
      </div>


    </div>

    <div>
</body>
<html>

＆＃13;

一切都像我希望的那样（如：定位，而不是这个例子的颜色），但我对于添加＆＃39;并不满意。按钮。

我想知道是否有更好的方法来处理＆＃39;添加＆＃39;按钮，因此它与图标+标签组合的大小相同。现在我使用边距。

在这种情况下，flex显示是一个很好的解决方案吗？我应该使用像display：table这样的东西吗？

可拖动列表的Flexbox模板

0 个答案: