本文共 2202 字，大约阅读时间需要 7 分钟。

CSS Flexbox 和 Grid 教程

目录

Basic HTML 和 HTML5

HTML5 是网页开发的基础，理解它是掌握前端开发的关键。

Basic CSS

CSS 是 CSS全称，即 Cascading Style Sheets（层叠样式表），用于定义网页的样式和布局。

Position

• Position: static：默认值，元素不会移动。
• Position: relative：相对于常见位置。
• Position: absolute：相对于 viewport。
• Position: fixed：相对于 viewport，不随滚动移动。

Float

• Float 属性用于将元素在文本流中左边或右边排列。

Animation

• Animation 可以创建简单的动画效果。

Applied Visual Design

视觉设计是网页美观的关键。

Applied Accessibility

Tabindex

• Tabindex 属性允许用户通过 tab 键导航网页，提升网页的可访问性。

Responsive Web Design Principles

Media Queries

• Media Queries 是检测设备屏幕尺寸的常用方法。
• 常见的响应式布局示例：@media (max-width: 768px) { ... }

Make Typography Responsive

• 使用 Viewport units（vw, vh）来实现响应式字体大小。
• 注意区别： viewport units 是相对设备的高度或宽度，而百分比是相对父容器。

CSS Flexbox

Flex Container

• 使用 display: flex 将元素转换为 flexbox 容器。
• Flex-direction 属性控制 flexbox 的方向：
  • flex-direction: row：默认，元素从左到右排列。
  • flex-direction: column：元素从上到下排列。

Flex Items

• Flex items 是 flexbox 中的内容元素。
• Justify-content 属性定义 flexbox 内的对齐方式：
  • justify-content: flex-start：左对齐。
  • justify-content: center：居中。
  • justify-content: flex-end：右对齐。
  • justify-content: space-around：均匀分布。
  • justify-content: space-between：两端对齐。

Align-items

• Align-items 定义 flexbox 内的垂直对齐方式：
  • align-items: flex-start：顶部对齐。
  • align-items: flex-end：底部对齐。
  • align-items: center：居中。
  • align-items: stretch：自动填充容器高度。
  • align-items: baseline：根据文本基线对齐。

Flex-wrap

• Flex-wrap 控制 flexbox 内的布局：
  • flex-wrap: nowrap：默认，不换行。
  • flex-wrap: wrap：允许元素换行。
  • flex-wrap: wrap-reverse：反向换行。

CSS Grid

Grid Container Properties

• Display: grid：将元素转换为 grid 容器。
• Grid-template-columns 和 Grid-template-rows 定义 grid 的列和行。
  • 示例：grid-template-columns: 100px 200px;
  • 示例：grid-template-rows: 50px 100px;

Grid Column 和 Row Gap

• Grid-column-gap 和 Grid-row-gap 设置 grid 中的间隙。

Grid Item Properties

• Grid-column 和 Grid-row 定义 grid 中的位置。
• Justify-self 和 Align-self 控制 grid 中的对齐方式。

其他

给每个区域起个名字

• Grid-template-areas 可以为 grid 的区域命名，方便定位。

以上内容完整涵盖了 CSS Flexbox 和 Grid 的核心知识，帮助开发者更好地理解和应用这些布局系统。

转载地址：http://ftjr.baihongyu.com/