前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flex布局

Flex布局

作者头像
wade
发布2020-04-24 11:26:57
1.3K0
发布2020-04-24 11:26:57
举报
文章被收录于专栏:coding个人笔记

一般的网页布局,都是和模型布局,要想把行标签和块标签一排布局,一般都用display: inline-block、或者是浮动float。但是这两者对于一些特殊布局或者垂直居中很不方便。于是2009年的时候w3c提出了flex布局,也叫弹性布局,可以更简单的实现响应式和一些特殊布局。

现在的主流浏览器几乎都兼容了flex布局,连IE只要是10+的都兼容。手机的话更是安卓4.4以上,现在想找到4.4以下也很难了。IOS的话具体兼容到哪一个版本不知道,但是开发到现在还没遇见不兼容的,所以flex可以放心使用。要是有IE8等用户,我建议是给个提示去升级吧。

当一个快里面,你想所有东西都一行排列,只需要给这个块设置display: flex;那么里面的东西都会横向排列,而且行元素(p)、行内元素(span)等都会变成块元素,都可以设置宽高。

先说说横向的布局,当你使用了flex之后,align-items是控制上下方向的,center是上下居中、flex-end是下边对齐、flex-start是向上对齐。还有一个左右的属性justity-content,center左右居中、space-between靠两边,space-around会自动帮你左右两边留白。

当你定义了你需要的布局后,还可以自定义margin,这对于特殊的布局是很有简便的。

当然,有些时候我们需要自动填充,就是不确定个数,然后一直往下填充,就像淘宝天猫一样,商品的列表是自动填充的。这时候就需要设置flex-wrap: wrap;如果没有这个可换行的属性,你的内容不管定义了多少的宽度,还是会挤压在你的父容器里面,导致变形。

如果你需要的还是竖向的排列,又想用flex的上下居中或者左右布局,那么设置flex-direction: column,这时候就是竖向布局。注意的是,这时候的align-items就会变成左右的布局,justity-content就是上下的布局了。

项目开发中,flex布局一般就用这几个属性,只要写几个div或者ul li就很容易上手,尤其是对于APP,只要宽度百分比加flex布局,几乎就可以做到百分之90的自适应。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-05-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档