Flex的基本使用+综合案例

于 2024-08-25 17:17:18 发布
阅读量484 收藏 1
点赞数 3
文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clmm_/article/details/141531034
版权

组成

弹性盒子没有设置高，就会自动拉伸

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-组成</title>
  <style>
    /* 弹性容器 */
    .box {
      display: flex;

      height: 300px;
      border: 1px solid #000;
    }

    /* 弹性盒子：沿着主轴方向排列 */
    .box div {
      width: 200px;
      /* height: 100px; */
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

</body>

</html>

主轴对齐方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-主轴对齐方式</title>
  <style>
    .box {
      display: flex;
      /* justify-content: flex-start; */

      /* justify-content: flex-end; */

      /* 居中 */
      /* justify-content: center; */

      /* 父级剩余的尺寸分配成间距 */

      /* 弹性盒子之间的间距相等 */
      /* justify-content: space-between; */

      /* 间距出现在弹性盒子两侧 */
      /* 视觉效果：弹性盒子之间的间距是两端间距的2倍 */
      /* justify-content: space-around; */

      /* 各个间距都相等 */
      justify-content: space-evenly;

      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

</body>

</html>

侧轴对齐方式

如果没有设置侧轴对齐方式和弹性盒子的高度，默认是stretch。

这也是为什么上面有提到，高度没设置会自动拉伸的原因

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-侧轴对齐方式</title>
  <style>
    .box {
      display: flex;
      /* 弹性盒子在侧轴方向没有尺寸才能拉伸 */
      /* align-items: stretch; */

      /* align-items: center; */

      /* align-items: flex-start; */

      align-items: flex-end;

      height: 300px;
      border: 1px solid #000;
    }

    /* 第二个div，侧轴居中对齐 */
    .box div:nth-child(2) {
      align-self: center;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

</body></html>

修改主轴方向

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-修改主轴方向</title>
  <style>
    .box {
      display: flex;

      /* 修改主轴方向 垂直方向；侧轴自动变换到水平方向 */
      flex-direction: column;

      /* 主轴在垂直，视觉效果：垂直居中 */
      justify-content: center;

      /* 侧轴在水平，视觉效果：水平居中 */
      align-items: center;

      width: 150px;
      height: 120px;
      background-color: pink;
    }

    img {
      width: 32px;
      height: 32px;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/1.png" alt="">
    <span>媒体</span>
  </div>

</body>

</html>

弹性伸缩比

注意！使用弹性伸缩比，控制的是主轴方向！

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-弹性伸缩比</title>
  <style>
    /* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
    .box {
      display: flex;
      flex-direction: column;

      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      /* height: 100px; */
      background-color: pink;
    }

    .box div:nth-child(1) {
      width: 200px;
    }

    .box div:nth-child(2) {
      flex: 1;
    }

    .box div:nth-child(3) {
      flex: 2;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

</body></html>

可以看到盒子3的高度是盒子2的两倍

为什么？

因为总份数 = 1+2，盒子2占了一份，盒子3占了两份

弹性盒子换行

想自动换行，在父级加wrap即可

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-弹性换行</title>
  <style>
    .box {
      display: flex;
      flex-wrap: wrap;

      /* 不换行 */
      /* flex-wrap: nowrap; */

      justify-content: space-between;

      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>

</body>

</html>

行对齐方式

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局-行对齐方式</title>
  <style>
    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      /* 调整 行对齐方式：对单行弹性盒子不生效 */
      /* align-content: flex-start; */
      /* align-content: flex-end; */

      /* align-content: center; */

      /* align-content: space-between; */
      /* align-content: space-around; */

      /* 没有代码提示 */
      align-content: space-evenly;


      height: 400px;
      border: 1px solid #000;
    }

    .box div {
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>

</body></html>

综合案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      /* 盒子自动内减 */

    }

    li {
      list-style: none;
    }

    .box {
      border: 1px solid black;
      width: 1200px;
      height: 418px;
      border-radius: 10px;
      /* 直角变圆角 */

      margin: 50px auto;
      /* 和上面产生距离50px，水平居中 */
    }

    .box ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      padding: 90px 40px 90px 60px;
      /* 左上右下 */
      height: 418px;
    }

    .box li {
      width: 500px;
      height: 88px;
      /* background-color: pink; */
      display: flex;
      flex-wrap: wrap;
    }

    .box .pic {
      margin-right: 15px;
    }

    .box .text h4 {
      /* 文字行高等于上边距+下边距+文字高 */
      line-height: 40px;
      font-size: 20px;
      font-weight: 400;
      /* 文字粗细 */
      color: #333;
    }

    .box .text p {
      font-size: 14px;
      color: #666;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul>
      <li>
        <div class="pic">
          <img src="./p1.png" alt="">
        </div>
        <div class="text">
          <h4>一键发布多端</h4>
          <p>发布视频到抖音短视频、西瓜视频及今日头条</p>
        </div>
      </li>
      <li>
        <div class="pic">
          <img src="./p2.png" alt="">
        </div>
        <div class="text">
          <h4>管理视频内容</h4>
          <p>支持修改已发布稿件状态和实时查询视频审核状态</p>
        </div>
      </li>
      <li>
        <div class="pic">
          <img src="./p3.png" alt="">
        </div>
        <div class="text">
          <h4>发布携带组件</h4>
          <p>支持分享内容携带小程序、地理位置信息等组件
          </p>
        </div>
      </li>
      <li>
        <div class="pic">
          <img src="./p4.png" alt="">
        </div>
        <div class="text">
          <h4>数据评估分析</h4>
          <p>获取视频在对应产品内的数据表现、获取抖音热点</p>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

clmm_
关注
前端-flex布局案例
03-20
前端-flex布局案例
Flex应用案例.zip
04-12
Flex、案例、Flex应用案例
flex官方经典实例
06-01
这是一些简单的flex实例，有利于初级学习flex的人学习。
12 个有用的FLEX 例子
06-08
12个有用的FLEX例子,很好, 仅供学习参考用, 不可商用.
Flex 布局教程：实例篇
最新发布
weixin_51341611的博客
03-21 1273
介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅。我的主要参考资料是的文章和。
flex实例
zb0002011的博客
07-16 233
要实现justify-content:between-space的效果，同时要保证中间一列左对齐。没能直接实现，采用下面方式实现了。 <!DOCTYPE html> <html> <head> <style> .row{ display:flex; width: 900px; //如果页面缩小太小，会有滚动条。 margin-bottom:10px; } .col{ flex:1.5 0; bo...
flex布局实例
黑胡子大叔的博客
07-14 677
flex布局实例
分享实际开发中的flex实例
weixin_42216094的博客
02-14 260
分享我在实际开发工作中用到的简单flex布局，写成了这个实例。
ActionScript教程 Flex教程 ActionScript+Flex教程
02-01
- **项目案例**：通过具体项目案例学习如何结合ActionScript与Flex构建复杂应用。 - **性能优化**：提高加载速度、减少内存占用、优化渲染效率。 - **发布与部署**：构建可执行文件、安装程序的创建。 #### 六、...
Flex+PHP+MySQL：开心农场游戏开发教程
"flex（flash）+php+mysql开心农场类游戏开发教程，涉及网络版游戏开发，使用flex作为...通过跟随教程，学习者不仅可以了解如何构建游戏的基本框架，还能掌握如何处理游戏数据和网络通信，从而提升自己的综合开发能力。
17个典型的Flex应用案例介绍
12-02
具有代表性的17个Flex开发的应用介绍，具有一定参考价值
Flex各种超酷实例代码大全
06-30
Flex各种超酷实例代码大全 demo 例子 很多例子
flex 案例
11-16
flex的一些实用案例，主要讲解flex怎么同其他语言交互的
Flex+LCDS+Java+入门教程
01-06
10. **案例分析**：通过实际案例来演示Flex、LCDS和Java的整合，帮助你更好地理解和应用这些技术。 这个入门教程将引导你逐步掌握Flex、LCDS和Java的综合运用，为开发高质量的RIA应用打下坚实的基础。通过深入学习...
Flex + LCDS + Java 入门教程
07-17
通过这个入门教程，读者将能够掌握Flex、LCDS和Java的综合应用，为构建高效、互动性强的企业级RIA奠定坚实基础。随着对这些技术的深入理解，开发者将有能力解决更复杂的业务需求，提升用户体验，为企业信息化建设...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
CSS可以设置颜色、字体、布局和响应式设计等，例如使用`background-color`、`font-size`、`display:flex`等属性。在webdemo-master中，CSS文件可能通过类选择器、ID选择器或伪类来指定特定HTML元素的样式。 ...
flex的使用实例
GUK
07-18 517
1.  flex设置元素垂直居中对齐 HTML代码： &lt;div class="demo"&gt; &lt;div class="inner"&gt; &lt;p&gt;这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; CSS代码：   .demo{ w
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值