时间戳

首页 > 解决方案 > 将一些项目与 flex 组合在一起？

html - 将一些项目与 flex 组合在一起？

问题描述

我有这个 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/

我怎样才能让这些元素按我想要的方式组合在一起？

标签： htmlcssflexbox

解决方案

您可以用 s 包装这些元素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>

推荐阅读