zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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

2023-02-18 15:36:15 时间

在布局前端页面的过程中,有使用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属性