CSS Flex 实现 Alignment Shifting Wrapping

Leophen

发布于 2022-05-07 19:32:35

1780

发布于 2022-05-07 19:32:35

文章被收录于专栏：Web前端开发Web前端开发

实现效果：

1、用 float 实现

.html：

<h3 class="title float-title">
  <span class="title-main">Main Title Here</span>
  <span class="title-note">This subtitle is floated.</span>
</h3>

.css：

.title {
  border-bottom: 1px solid #ccc;
  margin: 40px auto;
}
.title-note {
  font-size: 60%;
  color: #999;
}

.float-title {
  .title-note {
    float: right;
    position: relative;
    top: 12px;
  }
}

2、用 flex 实现

.html：

<h3 class="title flex-title">
  <span class="title-main">Main Title Here</span>
  <span class="title-note">This is a good look, right here.</span>
</h3>

.css：

.title {
  border-bottom: 1px solid #ccc;
  margin: 40px auto;
}
.title-note {
  font-size: 60%;
  color: #999;
}

.flex-title {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  .title-main {
    flex-grow: 1;
  }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-08-09，如有侵权请联系 cloudcommunity@tencent.com 删除

css

html

flex

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

html

flex

登录后参与评论

0 条评论

热度

CSS Flex 实现 Alignment Shifting Wrapping

CSS Flex 实现 Alignment Shifting Wrapping

实现效果：

1、用 float 实现

.html：

.css：

2、用 flex 实现

.html：

.css：

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

CSS Flex 实现 Alignment Shifting Wrapping

CSS Flex 实现 Alignment Shifting Wrapping

实现效果：

1、用 float 实现

.html：

.css：

2、用 flex 实现

.html：

.css：

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1、用 float 实现