布局

FleyX 发布于2019-08-29 12:37 / 2911人阅读

摘要：多列内容固定分布需求三列内容固定宽度并排显示知识点弹性布局项目的属性设置定义项目放大比列，默认值有剩余空间不放大定义项目缩小比列，默认值空间不足缩小设置项目在主轴的大小，默认值为跟或属性值一样比如该属性有两个快捷值和建议优先使用

多列内容固定分布

http://www.ruanyifeng.com/blo...
https://developer.mozilla.org...

1. 需求

三列内容固定宽度并排显示
280px 414px 56px

2. 知识点

弹性布局项目的flex属性设置

flex-grow 定义项目放大比列，默认值0有剩余空间不放大

flex-shrink 定义项目缩小比列，默认值1空间不足缩小

flex-basis 设置项目在主轴的大小，默认值为auto跟width或height属性值一样(比如350px)

flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

建议优先使用这个属性，而不是多带带写三个分离的属性，因为浏览器会推算相关值

3. 代码


  1111
  2222
  3

瀑布流

方法1: 插件

https://masonry.desandro.com/ 类似pinterest的布局模式

gutter、columnWidth

方法2: css column

方便，但是数据会被分成左右两列显示（数据不是按先后顺序排列的
）

column-count: 2;
column-width: 4.58666667rem;
column-gap: .18666667rem;

私有云超融合服务器 div布局布局html 排版布局拖动布局帧布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112025.html

实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

golden_hamster 2019-08-02 11:55 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

IamDLY 2019-08-29 17:12 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

Hegel_Gu 2019-08-23 12:52 评论0 收藏0
圣杯布局和双飞翼布局

摘要：解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。圣杯布局圣杯布局dom结构：圣杯布局 ...

yankeys 2019-08-29 13:54 评论0 收藏0
CSS三栏布局——多种方法详解，比较兼容性

摘要：题目假设高度已知，请写出三栏布局，其中左栏右栏宽度各为，中间自适应三栏布局的种方案这是一道经典的面试题，下面记录了布局的种方法。题目:假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应. 三栏布局的5种方案这是一道经典的面试题，下面记录了css布局的5种方法。三栏布局 * { margin: 0; ...

马忠志 2019-08-30 10:57 评论0 收藏0