Question

如何使用弹性框在不同的div之间给出间距。我想将最后3个div移到屏幕右侧，在它们之间给出相等的空间

＆＃13;

.flexBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #fff;
  margin: 20px;
  font-family: myriad-pro, sans-serif;
  font-style: normal;
  font-weight: 300;
}

.flexBox > div:nth-child(2),
.flexBox > div:nth-child(3),
.flexBox > div:nth-child(4) {
  margin-left: auto;
}

＆＃13;

<div class="flexBox">
  <div><img src="http://placehold.it/100x100" alt=""></div>
  <div><a class="navbutton" href="https://google.com">Home</a></div>
  <div><a class="navbutton" href="https://google.com">FAQ</a></div>
  <div><a class="navbutton" href="https://google.com">Log in</a></div>
</div>

＆＃13;

Answer 1

快速解决方案：

<div class="flexBox">
    <div class="logo-wrap"> <img src="{/logo.svg}"/> </div>
    <div><a class="navbutton" href="https://Google.com" >Home</a></div>
    <div><a class="navbutton" href="https://Google.com" >FAQ</a></div>
    <div><a class="navbutton" href="https://Google.com" >Log in</a></div>
</div>

<style>
    .flexBox {
        display:flex;
        align-items: center;
    }

    .logo-wrap {
        margin-right: auto;
    }
    .navbutton {
        padding: 0 10px;
    }
</style>

Answer 2

有很多解决方案。主要内容是在自己的容器中对导航项（链接）进行分组。

@BindingAdapter(value = "visiblity")
@JvmStatic
fun showHide(view : View, show : Boolean){
    view.visibility = when {
        show -> View.VISIBLE
        else -> View.GONE
    }
}

.flex {
  width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  list-style: none;
}

.nav__item {
  display: inline-block;
}

.nav__item:not(last-of-type) {
  margin-right: 30px;
}

注意：如果您不关心导航项目之间的特定边距，但是假设您的导航宽度为300px，您只希望项目间隔均匀：

<div class="flex">
  <div> <img src="https://placehold.it/60x60"/> </div>
  <ul class="nav">
    <li class="nav__item"><a class="navbutton" href="https://Google.com" >Home</a></li>
    <li class="nav__item"><a class="navbutton" href="https://Google.com" >FAQ</a></li>
    <li class="nav__item"><a class="navbutton" href="https://Google.com" >Log in</a></li>
  </ul>
</div>

Answer 3

您可以margin-right: auto向.flexBox > div:first-child推送其他兄弟姐妹到右边，然后调整margin的{{1}}，这是中间的一个三，实现它们之间的相等间距：

＆＃13;

.flexBox > div:nth-child(3)

＆＃13;

body {margin: 0}

.flexBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #fff;
  margin: 20px;
  font-family: myriad-pro, sans-serif;
  font-style: normal;
  font-weight: 300;
  background: lightblue; /* demo */
}

.flexBox > div:first-child {
  margin-right: auto;
}

.flexBox > div:nth-child(3) {
  margin: 0 10px;
}

/* addition */
img {
  display: block; /* or "vertical-align: middle" removes bottom margin/whitespace */
}

＆＃13;

使用flex将div移向右侧

3 个答案: