每周获取最新的 Wordpress 资源

flex 布局全解

网页布局一直是前端开发一个重要领域,了解一下布局的历史也是有意义的:

  • table 表格布局(早期),但是不符合语义,可以使用 display: table/table-row/table-cell 来代替
  • 技巧性布局(难),如使用 float 布局,inline-block 布局,position 布局,负的 margin 布局,以上互相组合,经典布局代表:双飞翼布局,圣杯布局
  • flexbox / grid(最新布局规范,也是今后推荐方案)
  • 响应式布局(多终端时代)

flex 布局是当前 web 移动端布局的主角,彻底掌握也是非常必要的。

flex 布局相关的概念

看图说话,我们着重需要了解的就是 flex container 和 flex item 的概念,flex 布局的相关 CSS 属性就可以分为设置 flex container 和 flex item 的属性。

flex container 的属性

属性 说明
flex-direction 方向
flex-wrap 换行
flex-flow 上面两个的简写
justify-content 主轴方向对齐方式
align-items 侧轴对齐方式
align-content 多行/列内容对齐方式

flex item 的属性

属性 说明
flex-grow 增长比例/因子(空间过多时)
flex-shrink 收缩比例/因子(空间不够时)
flex-basis 默认大小
flex 上面三个的缩写
order 顺序(可代替双飞翼布局)
align-self 自身的对齐方式

flex 布局实例解析

下面来用 flex 来写几个经常用到的布局。

flex 居中布局

flex(不)定宽与自适应

flex 等分布局

下面着重分析下 flex: 1 具体什么意思:

  • flex 是 flex-grow, flex-shrink, flex-basis 的简写
  • flex: 1 是 flex: 1 1 0%; 的简写
  • 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
  • flex-grow(增长因子) 取值为 1 代表如果其它 flexbox item 没有 flex-grow 值(即默认值 0),那么会填充剩余空间
  • flex-shrink(收缩因子)取值为 1 (默认值)代表如果没有足够空间,那么会缩小元素,它的内容也将会出现换行
  • flex-basis 元素的初始大小,取值 0%,和取值为 0 的结果是一致

flex 游戏

玩游戏巩固并掌握 flex 布局,是大多数人喜欢的一种方式,也是很有效果的方式,这里推荐两个学习 flex 的游戏:

You May Also Like

About the Author: ted

发表评论

电子邮件地址不会被公开。 必填项已用*标注