flex中的第一项和最后的第二项

Question

我猜是很常见的问题，但是找不到任何解决方案。

代码是：

<div class="container">
  <div class="first-item">A</div>
  <div class="second-item">B</div>
</div>

应如下所示：

first-item将在中间，second-item应该在最后。

我尝试过的事情：

.container {
  display: flex;
  justify-content: center;
}

.container .second-item {
  align-self: flex-end;
}

如何使用flex或以其他任何方式css实现它？

Answer 1

您可以尝试

 mounted() {
   var dropzoneComponent = new Dropzone (
     '#dropzone',
     {
       url: 'file/upload',
       createImageThumbnails: false,
       previewsContainer: '#template-preview',
       acceptedFiles: '.svg',
       init: function() {
       this.on ('complete', function() {
          window.location.href='http://localhost:8080/edit-draft'
          })
      this.on('addedfile', function(file) {
            localStorage.setItem('file', JSON.stringify(file))
          })
       },
     }
   )
  },




Here it gets called from the LocalStorage
    data: () => ({
        mode: "edit",
        svgFile: localStorage.getItem('file'),
        floorStore: store.floor
      }),

.container {
  display: flex;
  justify-content: center;
}

.container .second-item {
  right: 0;
  position: absolute;
}

Answer 2

几乎：您只需要在第一个元素上添加一个边距auto

.container {
  display: flex;
  justify-content: center;
}

.first-item {
  margin: auto;
}
.second-item {
  align-self: flex-end;
}

  

Codepen demo