博客
关于我
H5移动开发布局之-------流式布局~弹性布局(flex) ----圣杯布局
阅读量:591 次
发布时间:2019-03-12

本文共 946 字,大约阅读时间需要 3 分钟。

流式布局与flex弹性布局是网页开发中重要的布局方式不同。了解它们的优劣及使用方法,能够更好地解决实际项目中的布局问题。

1. 流式布局

流式布局是传统的布局方式,主要通过设置盒子的宽度百分比来实现。这种布局方式简单易学,且兼容性较好,适用于大多数情况。

  • 百分比布局:通过设定各个子盒子的宽度为百分比来控制其大小。
  • 示例代码:通过父盒子设为100%宽度,子盒子分别设定不同的百分比。

2. flex弹性布局

flex布局是一种更为灵活的布局方式,适用于需要灵活安排空间的场景,如响应式设计。

  • 优点:操作简便,支持多种布局方式,易于维护。
  • 缺点:部分浏览器不支持,尤其是IE11及以下版本。
  • 基本原理:父盒子设为flex容器,子盒子自动变为flex项目。

flex布局详解

flex directional居中元素布局

通过设置diraction属性,将主轴设置为垂直方向,元素居中。

justify-content属性

  • 语法:决定主轴方向上的对齐方式,如left、center、right、space-around等。
  • 示例:设置justify-content: center;

flex-wrap属性

控制子元素是否换行:

  • nowrap:子元素不会换行,宽度超过父盒子宽度时会自动缩小。
  • wrap:子元素自动换行。

flex-flow属性

综合设置主轴方向和换行方式:

  • 语法:flex-flow: row wrap;

align-items属性

控制侧轴方向的对齐方式,适用于单行元素布局:

  • 定义方式:align-items: flex-start/flex-end/center/ space-between;

align-content属性

控制多行元素的排列方式,适用于多行的侧轴对齐

  • 语法:align-content: flex-start/flex-end/center/ space-between;

flex属性

设置子元素占主轴方向的比例,支持数值或百分比表示:

  • 语法:flex:3/2/100%;
  • 允许方式:通过flex属性,实现多维度的空间分配。

圣杯布局实例

圣杯布局是一种常见的复杂布局应用,通过Flex框架实现非常容易。

通过上述样式,能够轻松构建复杂的布局结构。

转载地址:http://qmhtz.baihongyu.com/

你可能感兴趣的文章
mysql之分页查询
查看>>
Mysql之备份与恢复
查看>>
mysql之子查询
查看>>
MySQL之字符串函数
查看>>
mysql之常见函数
查看>>
Mysql之性能优化--索引的使用
查看>>
mysql之旅【第一篇】
查看>>
Mysql之索引选择及优化
查看>>
mysql之联合查询UNION
查看>>
mysql之连接查询,多表连接
查看>>
mysql乱码
查看>>
Mysql事务。开启事务、脏读、不可重复读、幻读、隔离级别
查看>>
MySQL事务与锁详解
查看>>
MySQL事务原理以及MVCC详解
查看>>
MySQL事务及其特性与锁机制
查看>>
mysql事务理解
查看>>
MySQL事务详解结合MVCC机制的理解
查看>>
MySQL事务隔离级别:读未提交、读已提交、可重复读和串行
查看>>
MySQL事务隔离级别:读未提交、读已提交、可重复读和串行
查看>>
mysql五补充部分:SQL逻辑查询语句执行顺序
查看>>