前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[前端系列] GOFLY在线客服系统源码- 布局中display: flex的意思

[前端系列] GOFLY在线客服系统源码- 布局中display: flex的意思

作者头像
唯一Chat
发布2021-11-02 16:53:38
5011
发布2021-11-02 16:53:38
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

在布局前端页面的过程中,有使用display: flex来进行弹性布局

任何块,设置了display: flex就变成了弹性容器

设为Flex布局以后,子元素的float、clear和vertical-align属性将失效,变成了一条线

可以设置换行或者不换行

在 Flexbox 模型中,有三个核心概念: – flex 项(注:也称 flex 子元素),需要布局的元素 – flex 容器,其包含 flex 项 – 排列方向(direction),这决定了 flex 项的布局方向

flex子元素可以设置简短属性

flex : xx xxx xxxx

xx代表 flex-grow

xx代表 flex-shrink属性

xxxx 代表 flex-basis属性

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-10-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

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