Right align out the Float Property

问题

.header {
  display: flex
}

.logo,
.contribute,
.class 1,
.class 2 {
  display: inline-block;
  margin: auto 0;
}

<header class="header">
  <div class="logo">
  </div>
  <nav </nav>
    <div class="contribute">
    </div>
    <div class="class 1">
    </div>
    <div class="class 2">
    </div>
</header>

In this suppose .header has display: flex; set.

.logo, .contributor, .class 1, .class 2 has display: inline-block; set and are child to parent .header class, which is flex.

How can we make sure that the .class 1 and .class 2 are right aligned without using the flow property?

回答1:

Use margin-left: auto; for class1

div,
nav {
  display: inline-block;
}

.header {
  display: flex;
  justify-content: space-between;
}

<header class="header">
  <div class="left">
    <div class="logo">1</div>
    <nav></nav>
  </div>
  <div class="contribute">2</div>
  <div class="right">
    <div class="class1">3</div>
    <div class="class2">4</div>
  </div>
</header>

回答2:

Simply add margin-left: auto; to .class1 and it will push itself and .class2 to the right

I fixed your class names as CSS isn't happy with a class name of only one digit, like the 1 in class 1, so either remove the space (which I did in below sample) or add i.e. nr (nr1). Also, as the items in a flex container is flex items, the display: inline-block will have no effect.

.header {
  display: flex
}

.class1 {
  margin-left: auto;
}

<header class="header">
  <div class="logo">
  logo
  </div>
  <nav>
  </nav>
  <div class="contribute">contribute
  </div>
  <div class="class1">class 1
  </div>
  <div class="class2">class 2
  </div>
</header>

来源：https://stackoverflow.com/questions/44756138/right-align-out-the-float-property

标签

html

css

css3

flexbox