Question

我很想知道在div中垂直间隔弹性项目的最佳方法。我希望标签在其兄弟姐妹之间有更多的空间，因此为什么我增加了3的弹性增长。但是弹性项目内的文本不是在中心垂直对齐。

为什么他们没有在中心垂直对齐？还有一种更好的方法可以将它们垂直分开吗？

很想知道每个人的最佳实践，即使它是一种不同的方式。

＆＃13;

#test {
  display: flex;
  padding: 20px;
  background: lightgreen;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: 200px;
}
a {
  flex-grow: 3;
  background: red;
  justify-content: center;
  align-items: center;
}
span {
  flex-grow: 1;
  background: pink;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div id='test'>
  <span>stuff</span>
  <span>more stuff...</span>
  <a href='#'>link</a>
  <span>even more stuff</span>
</div>

＆＃13;

Answer 1

您正在为子元素分配flexbox属性，这些元素仍然只是内联元素（而不是flexbox元素）。

＆＃13;

package scripts

import com.example.SomeJavaInterface
import com.example.SomeArg
import com.example.SomeReturnValue

class TestScript : SomeJavaInterface {
    override fun someMethod(SomeArg arg): SomeReturnValue {
        return SomeReturnValue()
    }
}

＆＃13;

#test {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
  padding: 20px;
  background: lightgreen;
  height: 200px;
}

#test > * {
  display: flex;
  align-items: center;
}

a {
  flex-grow: 3;
  background: red;
}
span {
  flex-grow: 1;
  background: pink;
}

＆＃13;

垂直对齐弹性项目的最佳做法

1 个答案: