第 12 题:什么是 Flex 布局?

  • A+
所属分类:Web前端
摘要

Flex 布局是目前比较流行的一种布局,因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。使用 Flex 属性就可以写出简洁优雅复杂的页面布局


为什么要使用 Flex 布局?

  • Flex 布局是目前比较流行的一种布局,因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。使用 Flex 属性就可以写出简洁优雅复杂的页面布局

  • 目前整理了一些 Flex 布局常用的一些属性,以下简单说一下容器和项目的意思

    • 容器:采用 Flex 布局的元素,称为容器

    • 项目:指的是容器里面的子元素

容器的 6 个属性

  • flex-direction:属性决定主轴的方向(即项目的排列方向)

  • flex-wrap:默认情况下项目都排在一条轴线上,如果一行放不下如何处理(换行方式)

  • flex-flow:flex-direction | flex-wrap(2 个属性的简写)

  • justify-content:项目在主轴上的对齐方式(默认水平对齐方式)

  • align-items:项目在交叉轴上如何对齐(默认垂直对齐方式)

  • align-content:多根轴线的对齐方式(即多行的对齐方式)

项目的 6 个属性

  • order:项目的排列顺序。数值越小,排列越靠前,默认为 0

  • flex-grow:项目的放大(默认指宽度)比例,默认为 0,即如果存在剩余空间,也不放大

  • flex-shrink:项目的缩小(默认指宽度)比例,默认为 1,即如果空间不足,该项目将缩小

  • flex-basis:项目将占据固定空间(默认设置固定宽度)

  • flex:flex-grow | flex-shrink | flex-basis(3 个属性的缩写)

  • align-self:允许单个项目有与其他项目不一样的对齐方式,可覆 align-items 属性

参考资料:
Flex 布局教程:语法篇 - 阮一峰的网络日志

文章的内容/灵感都从下方内容中借鉴