css布局笔记

CSS中的Flex布局

目录

一.什么是Flex布局

Flex是"Flexible Box"的缩写，意为弹性布局：

  • 可简便、完整、响应式地实现页面布局
  • 为盒子模型提供最大灵活性
  • 任何容器都可指定为Flex布局：
.box {
  display: flex;
}

二.Flex布局使用

2.1 Flex使用语法

/* 块元素 */
.container {
  display: flex;
}

/* 行内元素 */
.container {
  display: inline-flex;
}

使用Flex布局后，子元素的float/clear/vertical-align属性失效

2.2 基本概念

Flex基本概念

  • 容器：采用Flex布局的元素
  • 项目：容器的直接子元素
  • 主轴(main axis)：水平轴，起点main end，终点main end
  • 交叉轴(cross axis)：垂直轴，起点cross start，终点cross end

三.容器的属性

3.1 所有属性概述

属性 作用
flex-direction 项目排列方向
flex-wrap 换行方式
flex-flow 排列+换行的简写
justify-content 主轴对齐方式
align-items 交叉轴对齐方式
align-content 多轴线对齐方式

3.2 flex-direction

flex-direction示例

.container {
  flex-direction: column-reverse | column | row | row-reverse |;
}

3.3 flex-wrap

flex-wrap示例

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3.4 flex-flow

.container {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.5 justify-content

justify-content示例

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

补充：space-evenly属性——将剩余空间给剩余元素均匀分配

3.6 align-items

align-items示例

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

3.7 align-content

align-content示例

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

四.项目(子元素)的属性

4.1 所有属性概述

属性 作用
order 排列顺序
flex-grow 放大比例
flex-shrink 缩小比例
flex-basis 初始主轴尺寸
flex grow/shrink/basis简写
align-self 单独对齐方式

4.2 order

order示例

.item {
  order: <integer>; /* 默认0 */
}

4.3 flex-grow

flex-grow示例

.item {
  flex-grow: <number>; /* 默认0 */
}

4.4 flex-shrink

flex-shrink示例

.item {
  flex-shrink: <number>; /* 默认1 */
}

4.5 flex-basis

.item {
  flex-basis: <length> | auto; /* 默认auto */
}

4.6 flex

.item {
  flex: none | [<flex-grow> <flex-shrink> <flex-basis>];
}

4.7 align-self

align-self示例

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

4.8 gap设置间距

.class{
    display:flex;
    justify-content:center;
    /* 在center的基础上，设置2vw的间距 */
    gap:2vw;
}

** 使用 clamp() 动态调整.让 gap 在最小值和最大值之间动态缩放：**

.flex-container {
    gap: clamp(8px, 2vw, 16px); /* 最小值 8px，默认 2vw，最大值 16px */
}

版权声明：本文遵循 CC 4.0 BY-SA 版权协议
原文链接：https://blog.csdn.net/zheshiyangyang/article/details/139089985

CSS Grid 布局完整指南

最强大的CSS布局方案，二维布局的完美解决方案

📊 Grid vs Flex 布局对比

特性 Flex 布局（一维） Grid 布局（二维）
维度 轴线布局，只能指定项目针对轴线的位置 将容器划分成行和列，指定项目所在的单元格
核心概念 主轴和交叉轴 行和列的网格系统
适用场景 适合一维排列 适合二维布局
控制精度 项目沿轴线分布 精确控制位置

🎯 基础概念演示

经典九宫格

.nine-grid {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
}

效果展示：

┌───┬───┬───┐
│ 1 │ 2 │ 3 │
├───┼───┼───┤
│ 4 │ 5 │ 6 │
├───┼───┼───┤
│ 7 │ 8 │ 9 │
└───┴───┴───┘

列划分方式

1. 绝对值划分 (px)

grid-template-columns: 100px 100px 100px;

2. 百分比划分 (%)

grid-template-columns: 33.33% 33.33% 33.33%;

3. 比例划分 (fr)

grid-template-columns: 1fr 2fr;

4. 混合单位

grid-template-columns: 150px 1fr 2fr;

repeat() 函数

grid-template-columns: repeat(3, 1fr);

auto-fill 自动填充

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

行列间距 (gap)

gap: 20px 30px; /* 行间距 列间距 */

🚀 高级特性演示

1. grid-template-areas 区域命名

grid-template-areas: 
  "header header header"
  "main main sidebar"
  "footer footer footer";

布局效果：

┌──────┬──────┬──────┐
│      Header      │
├──────┼──────┼──────┤
│      Main   │Side│
├──────┼──────┼──────┤
│      Footer      │
└──────┴──────┴──────┘

2. 容器对齐

justify-content: center;  /* 水平居中 */
align-content: center;    /* 垂直居中 */

3. 项目精确定位

grid-column: 2 / 4; /* 从第2列到第4列 */
grid-row: 1 / 3;    /* 从第1行到第3行 */

4. 网格线命名

grid-template-columns: [start] 100px [line2] 100px [line3] 100px [end];
grid-column: line2 / end;

💡 实战案例

响应式卡片布局

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

特点：

  • 自动适应屏幕宽度
  • 最小宽度200px
  • 超出时等比例分配剩余空间
  • 完美适配各种设备

复杂页面布局

.complex-layout {
  display: grid;
  grid-template-areas:
    "nav header header"
    "nav content sidebar"
    "nav footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  gap: 15px;
}

📋 Grid 属性速查表

容器属性

属性 说明
display grid | inline-grid
grid-template-columns 定义列
grid-template-rows 定义行
grid-template-areas 定义区域
gap 设置间距
justify-content 水平对齐
align-content 垂直对齐
grid-auto-flow 排列顺序

项目属性

属性 说明
grid-column 列位置
grid-row 行位置
grid-area 区域位置
justify-self 单项水平对齐
align-self 单项垂直对齐
place-self 单项对齐简写

🔧 常用函数和关键字

核心函数

  • repeat() - 重复定义网格轨道

    repeat(3, 1fr)
repeat(auto-fit, 200px)

  • minmax() - 定义尺寸范围

    minmax(100px, 1fr)
minmax(200px, auto)

  • fit-content() - 适应内容尺寸

    fit-content(200px)
fit-content(50%)

单位系统

  • fr - 弹性比例单位
  • auto - 自动尺寸
  • % - 百分比
  • px - 绝对像素

关键字

  • auto-fill - 自动填充列
  • auto-fit - 自动适应列
  • dense - 紧密排列

🎨 最佳实践

1. 响应式设计

/* 移动端优先 */
.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* 平板适配 */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

2. 命名规范

/* 清晰的区域命名 */
.page-layout {
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

3. 性能优化

  • 使用 repeat() 减少代码量
  • 合理使用 minmax() 避免溢出
  • 移动端使用 auto-fit 提升体验

📚 学习资源

🎯 快速开始模板

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }
    
    .grid-item {
      background: #f0f0f0;
      padding: 1rem;
      border-radius: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">项目 1</div>
    <div class="grid-item">项目 2</div>
    <div class="grid-item">项目 3</div>
  </div>
</body>
</html>

基于博客文章：CSS Grid布局详解
最后更新：2024年

posted @ 2026-07-02 18:19  畅畅c  阅读(4)  评论(0)    收藏  举报