乐趣区

关于html:第-12-题什么是-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 布局教程:语法篇 – 阮一峰的网络日志

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

  • 【继续保护 / 更新 500+ 前端面试题 / 笔记】https://github.com/noxussj/In…
  • 【大数据可视化图表插件】https://www.npmjs.com/package…
  • 【利用 THREE.JS 实现 3D 城市建模(珠海市)】https://3d.noxussj.top/
退出移动版