微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > FlexBox 弹性盒

博主信息

博文 11

粉丝 0

访问量 10639

专题推荐

更多>

1.弹性盒子常用属性

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

FlexBox弹性盒布局快速预览

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlexBox弹性盒布局快速预览</title>
    <style>
      .container {
        width: 300px;
        /* 如果这个容器中的内容要使用flexBox布局， 第一步就是必须将这个容器转为弹性盒子 */
        /* 弹性容器 */
        display: flex;
      }
      .container > .item {
        /* 行内：全部在一排显示 */
        /* 块：　可以设置宽和高 */
        flex: auto;
        /* width: 60px; */
        /* height: 60px; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <span class="item">2</span>
      <a class="item">3</a>
    </div>
  </body>
</html>

重点：

一旦将父元素转为弹性容器，内部的“子元素”就会自动成为：弹性项目 , 不管这个项目标签之前是什么类型，统统转为“行内块”

所有项目必须沿主轴排列，与主轴垂直的轴称为:交叉轴，侧轴，列轴，辅助轴。

2.FlexBox弹性盒多行容器中项目对齐方式

演示代码

  <style>
      .container {
        width: 300px;
        display: flex;
        /* 多行容器 */
        flex-wrap: wrap;
        height: 150px;
        /* align-content: 设置多行容器中的项目排列; */
        /* 1. 容器剩余空间在所有项目“二边”的如何分配 ，将全部项目视为一个整体*/
        align-content: stretch;  //默认值元素被拉伸以适应容器。
        align-content: flex-start; //各行向弹性盒容器的起始位置堆叠。
        align-content: flex-end;//各行向弹性盒容器的结束位置堆叠。
        align-content: center;//各行向弹性盒容器的中间位置堆叠。
        /* 2. 容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
        align-content: space-between;
        align-content: space-around;
        align-content: space-evenly;
      }
      .container > .item {
        width: 60px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      </div>
  </body>

3.主轴为垂直方向时的项目排列

代码

<style>
    .container {
      width: 300px;
      height: 150px;
      display: flex;
      /* 主轴方向：默认为行 */
      flex-direction: row;
      flex-direction: column;
      /* 项目二边分配 */
      justify-content: flex-start;
      justify-content: flex-end;
      justify-content: center;
      /* 项目之间分配 */
      justify-content: space-between;
      justify-content: space-around;
      justify-content: space-evenly;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>

4.项目在交叉轴上的排列

代码

    <style>
      .container {
        width: 300px;
        height: 200px;
        display: flex;
        /* 项目在交叉轴上默认是自动伸缩的 */
        align-items: stretch;
        align-items: flex-start;
        align-items: flex-end;
        align-items: center;
      }
      .container > .item {
        width: 60px;
      }
    </style>

重点：align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

5.flex容器属性实战: 快速撸一个简单主导航

代码

<style>
      /* 初始化 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: #ccc;
      }
      nav {
        height: 40px;
        background-color: #333;
        padding: 0 50px;
        /* 转为弹性盒布局 */
        display: flex;
      }
      nav a {
        height: inherit;
        line-height: 40px;
        padding: 0 15px;
      }
      nav a:hover {
        background-color: seagreen;
        color: white;
      }
      /* 登录/注册放在最右边 */
      nav a:last-of-type {
        margin-left: auto;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <a href="">首页</a>
        <a href="">教学视频</a>
        <a href="">社区问答</a>
        <a href="">资源下载</a>
        <a href="">登录/注册</a>
      </nav>
    </header>
  </body>

效果

6.order控制项目顺序小案例

代码

 <style>
      .container {
        width: 300px;
        display: flex;
        flex-direction: column;
      }
      .container > .item {
        border: 1px solid #000;
        padding: 10px;
        display: flex;
        position: relative;
      }
      .container > .item > div {
        display: flex;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
        images-1.jpg
        <div>
          <button onclick="up(this)">Up</button
          ><button onclick="down(this)">Down</button>
        </div>
      </div>
      <div class="item">
        images-2.jpg
        <div>
          <button onclick="up(this)">Up</button
          ><button onclick="down(this)">Down</button>
        </div>
      </div>
      <div class="item">
        images-3.jpg
        <div>
          <button onclick="up(this)">Up</button
          ><button onclick="down(this)">Down</button>
        </div>
      </div>
    </div>
    <script>
      let up = (ele) => (ele.offsetParent.style.order -= 1);
      let down = (ele) => (ele.offsetParent.style.order += 1);
    </script>
  </body>

效果

flex属性总结

一.父元素属性

display:flex;（定义了一个flex容器）
flex-direction（决定主轴的方向）
row（默认值，水平从左到右）colunm（垂直从上到下）row-reverse（水平从右到左）column-reverse（垂直从下到上）
flex-wrap（定义如何换行）
nowrap（默认值，不换行）wrap（换行）wrap-reverse（换行，且颠倒行顺序，第一行在下方）
flex-flow（属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap）
justify-content（设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式）
flex-start（默认值、弹性盒子元素将向行起始位置对齐）
flex-end（弹性盒子元素将向行结束位置对齐）
center（弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐）
space-between（弹性盒子元素会平均地分布在行里）
space-around（弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半）
align-items（设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式）
flex-start（弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界）
flex-end（弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界）
center（弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
baseline（如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。）
stretch（如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制）
align-content（设置或检索弹性盒堆叠伸缩行的对齐方式）
flex-start（各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行）
flex-end（各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行）
center（各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等）
space-between（各行在弹性盒容器中平均分布。第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等）
space-around（各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半）
stretch（各行将会伸展以占用剩余的空间。剩余空间被所有行平分，以扩大它们的侧轴尺寸）