Flex布局 写法示例

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 的内容见这里

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 提高编程技艺摘要

    杰出程序员之所以如此成功,就是因为他们一直在锻炼。完美的身材要靠定期的锻炼才能获得,而且必须坚持锻炼才能保持,否则身材就会走形。对于编程和软件工程来说,道理是一...

    Joel
  • Sublime-evernote:支持用 Markdown 写印象笔记(Evernote)

    { "noteStoreUrl": "", "token": "" } noteStoreUrl和token值为之前打开的页面的上的值。保存...

    Joel
  • Web前端进阶之路:提升前端开发效率

    低效的7大原因: 消极的心态,身体状态不好,目标不明确,思路不清晰,工作被打断,杂乱无章,做可被替代的重复劳动。

    Joel
  • AOP概念与术语

    AspectOriented Programing,面向切面编程。

    Dylan Liu
  • CSS3盒子模型

    给父级设置一个display:flex属性,子元素设置flex相关属性才可以自动分配宽高。

    踏浪
  • 腾讯云高防服务器 腾讯云BGP高防IP是如何防DDos和cc攻击的?

    腾讯云高防服务器又称为腾讯云BGP高防ip,无论你的业务是否在腾讯云,都可以使用腾讯云提供的DDos及cc防护。如果 业务不在腾讯云,只需把需要防护的设备绑定腾...

    追梦者
  • 腾讯云高防服务器 腾讯云BGP高防IP是如何防DDos和cc攻击的?

    腾讯云高防服务器又称为腾讯云BGP高防ip,无论你的业务是否在腾讯云,都可以使用腾讯云提供的DDos及cc防护。如果 业务不在腾讯云,只需把需要防护的设备绑定腾...

    用户6601673
  • 腾讯云高防服务器 腾讯云BGP高防IP是如何防DDos和cc攻击的?

    腾讯云高防服务器又称为腾讯云BGP高防ip,无论你的业务是否在腾讯云,都可以使用腾讯云提供的DDos及cc防护。如果 业务不在腾讯云,只需把需要防护的设备绑定腾...

    用户6497543
  • html+css学习笔记018-H5弹性盒模型

    Mr. 柳上原
  • Flex Box布局学习- 语法

    上一篇,我学习并整理了使用flex时,需要注意的兼容性问题。那么今天就来学习一下有关flex语法的东西。

    贺贺V5

扫码关注云+社区

领取腾讯云代金券