开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >专栏 >Flex布局写法示例

Flex布局写法示例

作者头像

前端GoGoGo

发布于 2018-08-24 16:24:06

3720

发布于 2018-08-24 16:24:06

举报

文章被收录于专栏：九彩拼盘的叨叨叨九彩拼盘的叨叨叨

Flex布局，可以简便、完整、响应式地实现各种页面布局。

多个元素在一行

HTML

<div class="ly">
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
</div>

CSS

.ly {
    display: flex;
}

多个元素水平居中对齐

.ly {
  display: flex;
  justify-content: center;
}

多个元素水平两端对齐

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

多行多个元素水平两端对齐

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

多个元素在一行，某个元素占据剩余部分

.ly {
  display: flex;
}
// 给占据剩余部分的元素加该类名
.ly__item--fill {
  flex-grow: 1;
}

多个元素水平居右对齐

.ly {
  display: flex;
  justify-content: flex-end;
}

多个元素垂直居中

.ly {
  display: flex;
  align-items: center;
}

多个元素水平垂直居中对齐

.ly {
  display: flex;
  justify-content: center;
  align-items: center;
}

更多关于 Flex 的内容见这里。

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

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

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

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

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

评论

登录后参与评论

0 条评论

热度

最新

LV.

目录

多个元素在一行
多个元素水平居中对齐
多个元素水平两端对齐
多行多个元素水平两端对齐
多个元素在一行，某个元素占据剩余部分
多个元素水平居右对齐
多个元素垂直居中
多个元素水平垂直居中对齐