Question

这是我的HTML：

<header>
<div class="set">
<div class="set">
<div class="set">
<div class="set">
<div class="set">
<span>123</span>
</header>

如何有效地使用CSS Flex使header > div元素有效float: left;，同时有效header > span元素float: right;，同时将其保持在同一主轴？

Answer 1

在“右侧”范围内margin-left:auto。

header {
  display: flex;
  align-items: center;
  background: grey;
}
.set {
  height: 75px;
  flex: 0 0 50px;
  background: blue;
  margin: 1em;
}
.right {
  margin-left: auto;
  background: pink;
  padding: 1em;
}

<header>
  <div class="set"></div>
  <div class="set"></div>
  <div class="set"></div>
  <div class="set"></div>
  <div class="set"></div>
  <span class="right">123</span>
</header>

Answer 2

<div class="tree">
<ul>
    <li>
        <a href="#">Parent</a>
        <ul>
            <li>
                <a href="#">Child</a>
                <ul>
                    <li>
                        <a href="#">Grand Child</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Child</a>
                <ul>
                    <li><a href="#">Grand Child</a></li>
                    <li>
                        <a href="#">Grand Child</a>
                        <ul>
                            <li>
                                <a href="#">Great Grand Child</a>
                            </li>
                            <li>
                                <a href="#">Great Grand Child</a>
                            </li>
                            <li>
                                <a href="#">Great Grand Child</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Grand Child</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

this answer

CSS Flexbox水平组;除了一个右边以外都剩下了

2 个答案: