弹性盒子flex容器的四个属性，要这样理解才对！ - 前端学习笔记

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 弹性盒子flex容器的四个属性，要这样理解才对！

博主信息

博文 65

粉丝 2

访问量 74975

专题推荐

更多>

源码分享：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实例演示:flex容器常用的四个属性</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        height: 15em;
        border: 1px solid coral;
        padding: 1em;
        margin: 1em;
        /* 让这个.container容器的元素,采用flex弹性布局 */
        display: flex;
      }
      .container > .item {
        /* 项目属性 */
        width: 8em;
        background-color: lightyellow;
        border: 1px solid chocolate;
      }
      /* ==================flex-flow: 主轴方向 换行方式 ============= */
      .container {
        /* flex-flow: 主轴方向 换行方式  */
        /* 1、默认值 */
        flex-flow: row nowrap;
        /* 2、多行容器 */
        flex-flow: row wrap;
      }
      /* 3、改变主轴方向 */
      /* .container {
        flex-flow: column nowrap;
        flex-flow: column wrap;
        flex-flow: column wrap-reverse;
        height: 8em;
      } */
      /* =================justify-content:项目在主轴上的============= */
      .container {
        /* 1. 将所有项目视为一个整体 */
        /* 紧贴起始线 */
        justify-content: flex-start;
        /* 紧贴终止线 */
        justify-content: flex-end;
        justify-content: flex-end;
        /* 紧贴中间线 */
        justify-content: center;
        /* 2. 将每一个项目视为一个独立的个体 */
        /* 两端对齐: 剩余空间在"除了首尾项目之外"的每个项目之间进行平均分配 */
        justify-content: space-between;
        /* 分散对齐: 剩余空间在每个项目"二侧"进行平均分配 */
        justify-content: space-around;
        /* 平均对齐: 剩余空间在每个项目"之间"进行平均分配 */
        justify-content: space-evenly;
      }
      /* =================align-items:项目在交叉轴上的对齐方式============ */
      .container {
        flex-flow: row nowrap;
        /* 默认会充满单行容器的高度 */
        align-items: stretch;
        align-items: flex-start;
        align-items: flex-end;
        align-items: center;
        /* 单行容器中,剩余空间只会产生在主轴上, 交叉轴不存在剩余空间 */
      }
      /* ===============align-content:项目在多行容器中的对齐方式============ */
      .container {
        /* 生成多行容器 */
        flex-flow: row wrap;
        /* align-content: 控制项目在交叉轴上每一行的间隙; */
        align-content: stretch;
        align-content: flex-end;
        align-content: flex-start;
        align-content: center;
        align-content: space-around;
        align-content: space-between;
        align-content: space-evenly;
      }
    </style>
  </head>
  <body>
    <!-- 属性1、flex-flow ，主轴方向与换行方式 -->
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
      <div class="item">item5</div>
      <div class="item">item6</div>
      <div class="item">item7</div>
      <div class="item">item8</div>
    </div>
  </body>
</html>