Web前端开发技术

Appearance

弹性盒子布局 ​

元信息 ​

  • 目标：认识传统盒子模型在对齐与布局上的无力（依赖浮动、绝对定位等补丁），理解 Flex Box 用十字轴线从容器层面解决对齐与分布问题的思路
  • 关键概念：弹性盒子、Flex Box、轴线、水平对齐、垂直置中
  • 关联阶段：cp2
  • 常见误区：以为 text-align 能实现盒子居中（它只管盒子内内容的水平对齐，盒子自身的对齐要靠 margin auto 或 flex）；用语义标记（table/list）凑合实现排列（会污染页面语义结构）

内容元素的水平对齐 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

指内容元素（叶子节点）在标记盒子中的对齐,浏览器会根据水平基线(行盒子)进行自动计算

text-align 不支持垂直方向的对齐或置中。 css有一个vertical-align属性，但仅适用于图片这类特殊元素

标记元素的水平对齐 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

指标记元素（盒子或容器)之间的对齐。示例中将外边距的计算交由浏览器决定(必须能预先计算出子盒子的宽度),从而获得水平对齐的效果,但不支持垂直方向的自动计算

标记元素的垂直置中 ​

示例使用了绝对定位的技巧

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

对齐的N种方式 https://blog.csdn.net/weixin_37580235/article/details/82317240

形形色色的布局 ​

弹性盒子布局-0

传统盒子模型的问题 ​

  • 普通的盒子模型仅支持margin、padding等简单的位置调整，若实现横向或纵向的对齐与定位，需要依赖浮动、绝对定位及 各种补丁技术,如clearfix
  • list与table等盒模型虽然支持横轴或纵轴、甚至网格定位，但这些标记本质都是语义标记，若用于布局排版，将严重干扰页面内容的语义结构
  • 弹性或自适应性不足，难以适应不同设备、不同尺寸等情况(屏幕、浏览器窗口缩放)

传统盒子模型，本质上是一个字符盒子，其定位基线设计源自字体，而不是容器(有一些定制的容器，如list、table之类)。且早期出于便利的需要，未有严格区分元素的语义结构与样式布局

弹性盒子 Flexible Box ​

2009年，W3C 提出了一种新的盒子模型----弹性盒子 Flex Box，给盒子模型增加了一个十字轴线，允许盒子内部的元素沿轴线进行布局。目前，它已经得到了所有主流浏览器的支持，特别移动设备上的浏览器。

弹性盒子布局-1

Flex 示例 ​

Flex 参考 ​

Flex 工具 ​