Question

我有这个HTML：

<div id="header">
  <span id="title">ChainLine Cycle</span>
  <span id="address">1139 Ellis St, Kelowna, BC<br>(250) 860-1968<br><a href="mailto:bikes@chainline.ca"</a>bikes@chainline.ca</a></span>
  <span class="brand">Bianchi</span>
  <span class="brand">Marin</span>
  <span class="brand">Transition</span>
  <span id="hours">Sun&ndash;Mon: Closed<br>Tue&ndash;Fri: 10am-5pm<br>Sat: 10am-3pm</span>
  <span id="social"><img src="img/fb.png"><img src="img/ig.png"><br><img src="img/pb.png"><img src="img/tw.png"></span>
</div>

这个CSS：

#header {width:100%;background:#000;color:#fff;display:inline-flex;justify-content:space-between;}
#header span {padding:5px;margin:auto 0;}
#title {font-family:'Oleo Script',cursive;font-size:4em;}
#address {font-weight:bold;}
#hours {text-align:right;}
#social {font-size:0;right:0;}
#social img {padding:2.5px;}
.brand {font-size:3em;}

我正在尝试将最左边的两个<span>分组在左侧和右边，然后将中间的三个<span>均匀分布在剩余空间中。我无法弄清楚如何使用flex进行操作...我也尝试过使用表格，对其进行浮动，将它们绝对定位，将<div>放在我要分组的元素周围，而且似乎什么也没有工作。

实时示例在这里：http://www.chainline.ca/2019/

我如何才能将这些元素组合到所需的位置？

Answer 1

您可以用div包裹这些元素，然后将justify-content属性设置为space-between以实现该布局。像这样：

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

#header div {
  width: 100%;
}

#header div:nth-child(2) {
  display: flex;
  justify-content: space-between;
}

#header div:last-child {
  display: flex;
  justify-content: flex-end;
}

<div id="header">
  <div>
    <span id="title">ChainLine Cycle</span>
    <span id="address">1139 Ellis St, Kelowna, BC<br>(250) 860-1968<br><a href="mailto:bikes@chainline.ca"</a>bikes@chainline.ca</a></span>
  </div>
  <div>
    <span class="brand">Bianchi</span>
    <span class="brand">Marin</span>
    <span class="brand">Transition</span>
  </div>
  <div>
    <span id="hours">Sun&ndash;Mon: Closed<br>Tue&ndash;Fri: 10am-5pm<br>Sat: 10am-3pm</span>
    <span id="social"><img src="img/fb.png"><img src="img/ig.png"><br><img src="img/pb.png"><img src="img/tw.png"></span>
  </div>
</div>

Answer 2

使用大多数元素的自动边距来解决这个问题。

将某些项目与flex分组吗？

2 个答案: