flex布局

已于 2022-07-22 09:20:36 修改
阅读量122 收藏
点赞数
文章标签： css html css3
于 2022-07-21 18:03:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderlhj666/article/details/125917627
版权

flex布局

一、认识flexbox

  • Flexbox翻译为弹性盒子:

    • 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
    • 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;
    • 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);

  • flex布局是目前web开发中使用最多的布局方案：

    • flex 布局（Flexible 布局，弹性布局）;
    • 目前特别在移动端可以说已经完全普及;
    • 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;

  • 为什么需要flex布局呢?

    • 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
    • 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;

  • 原先的布局存在的痛点

    • 原来的布局存在哪些痛点呢? 举例说明:
      • 比如在父内容里面垂直居中一个块内容。
      • 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
      • 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

  • flexbox在使用时, 我们最担心的是它的兼容性问题:

  • 我们可以在caniuse上查询到具体的兼容性

  • 在这里插入图片描述

  • flex布局的重要概念

    • 两个重要的概念：

      • 开启了 flex 布局的元素叫 flex container
      • flex container 里面的直接子元素叫做 flex item
      • 在这里插入图片描述

    • 当flex container中的子元素变成了flex item时, 具备一下特点:

      • flex item的布局将受flex container属性的设置来进行控制和布局
      • flex item不再严格区分块级元素和行内级元素;
      • flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;

    • 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

      • flex： flex container 以 block-level 形式存在
      • inline-flex： flex container 以 inline-level 形式存在

    • flex布局的模型

      • 在这里插入图片描述

      • flex相关的属性

        • 在这里插入图片描述

flex-direction

  • flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布

  • flex-direction 决定了 main axis 的方向，有 4 个取值

    • row（默认值）、row-reverse、column、column-reverse

    • 在这里插入图片描述

    • 在这里插入图片描述

    • <!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>Document</title>
  <style>
    .contaicer {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      /* 
        flex-direction的四个值：修改主轴方向
        row ：行变成主轴方向
        row-reverse ：row的翻转
        column：列变成主轴方向
        column-reverse：column的翻转
      */

      flex-direction: row;
    }

    .item {
      width: 120px;
      height: 120px;
      background-color: #f00;
    }
  </style>
</head>

<body>

  <div class="contaicer">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <!-- <div class="item item4">4</div>
    <div class="item item5">5</div> -->
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-wrap

  • flex-wrap 决定了 flex container 是单行还是多行

    • nowrap（默认）：单行

    • wrap：多行

    • wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

    • 在这里插入图片描述

    • <!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>Document</title>
  <style>
    .contaicer {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

      /* 
        nowrap: 默认值
        wrap：多行
        wrap-reverse：多行翻转
      */
      /* flex-wrap: wrap; */
      /* flex-flow: wrap;  */
      flex-flow: column wrap;
    }

    .item {
      width: 120px;
      height: 120px;
      background-color: #f00;
    }
  </style>
</head>

<body>

  <div class="contaicer">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

    • 在这里插入图片描述

flex-flow

  • flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

    • 顺序任何, 并且都可以省略;

    • MDN上的语法：

      • 在这里插入图片描述

      • <!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>Document</title>
  <style>
    .contaicer {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      flex-flow: column-reverse wrap-reverse;
    }

    .item {
      width: 120px;
      height: 120px;
      background-color: #f00;
    }
  </style>
</head>

<body>

  <div class="contaicer">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <!-- <div class="item item4">4</div>
    <div class="item item5">5</div> -->
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

      • 在这里插入图片描述

justify-content

  • justify-content 决定了 flex items 在 main axis 上的对齐方式

    • flex-start（默认值）：与 main start 对齐
      在这里插入图片描述

    • flex-end：与 main end 对齐
      在这里插入图片描述

    • center：居中对齐

      • 在这里插入图片描述

    • space-between：

      • flex items 之间的距离相等
      • 与 main start、main end两端对齐
      • 在这里插入图片描述

    • space-around：

      • flex items 之间的距离相等
      • flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
      • 在这里插入图片描述

    • space-evenly：

      • flex items 之间的距离相等

      • flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

      • 在这里插入图片描述

      • <!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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      /*flex-start: 默认值，与main start对齐  */
      /* flex-end: 与main end对齐 */
      /* center: 居中对齐 */
      /* space-between：flex items 之间的距离相等，与main start、main end两端对齐 */
      /* space-evenly：flex items之间的间隙相等，flex items与main start 、main end之间的距离等于flex items之间的间隙 */
      /* space-around：flex items之间的间隙相等，flex items与main start 、main end之间的距离等于flex items之间的距离的一半 */
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

      • 在这里插入图片描述

align-item

  • align-items 决定了 flex items 在 cross axis 上的对齐方式

  • normal：在弹性布局中，效果和stretch一样

  • stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会 自动拉伸至填充 flex container

    • 在这里插入图片描述

  • flex-start：与 cross start 对齐

    • 在这里插入图片描述

  • flex-end：与 cross end 对齐

    • 在这里插入图片描述

  • center：居中对齐

    • 在这里插入图片描述

  • baseline：与基准线对齐

    • 在这里插入图片描述
  • <!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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      align-items: center;
    }

    .item {
      width: 120px;
      /* height: 100px; */
      background-color: red;
    }

    .item2 {
      height: 80px;
      font-size: 30px;
    }

    .item3 {
      height: 130px;
      font-size: 40px;
    }

    .item4 {
      height: 160px;
      font-size: 12px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <div class="item item4">2x</div>
    <div class="item item5">3x</div>

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

  • 在这里插入图片描述

align-content

  • align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似

    • stretch（默认值）：与 align-items 的 stretch 类似

      • 在这里插入图片描述

    • flex-start：与 cross start 对齐

      • 在这里插入图片描述

    • flex-end：与 cross end 对齐

      • 在这里插入图片描述

    • center：居中对齐

      • 在这里插入图片描述

    • space-between： flex items 之间的距离相等 与 cross start、cross end两端对齐

      • 在这里插入图片描述

    • space-around： flex items 之间的距离相等 flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半

      • 在这里插入图片描述

    • space-evenly： flex items 之间的距离相等 flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

    • <!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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: flex-start;
    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
    }

    /* .item2 {
      height: 80px;
      font-size: 30px;
    }

    .item3 {
      height: 130px;
      font-size: 40px;
    }

    .item4 {
      height: 160px;
      font-size: 12px;
    } */
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <div class="item item4">4x</div>
    <div class="item item5">5x</div>
    <div class="item item6">6x</div>

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

    • 在这里插入图片描述

flex-item属性 - order

  • order 决定了 flex items 的排布顺序

    • 可以设置任意整数（正整数、负整数、0），值越小就越排在前面

    • 默认值是 0

    • 在这里插入图片描述

    • <!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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
    }

    .item2 {
      order: 2;
      height: 80px;
      font-size: 30px;
    }

    .item3 {
      order: -1;
      height: 130px;
      font-size: 40px;
    }

    .item4 {
      order: 0;
      height: 160px;
      font-size: 12px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <!-- <div class="item item4">4x</div>
    <div class="item item5">5x</div>
    <div class="item item6">6x</div> -->

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

    • 在这里插入图片描述

flex-item属性 - align-self

  • flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

    • auto（默认值）：遵从 flex container 的 align-items 设置
    • stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致
    • 在这里插入图片描述

  • 在这里插入图片描述

  • <!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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      align-items: center;

    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
    }

    .item2 {
      align-self: flex-start;
      height: 80px;
      font-size: 30px;
    }

    .item3 {

      height: 130px;
      font-size: 40px;
    }

    .item4 {
      height: 160px;
      font-size: 12px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <!-- <div class="item item4">4x</div>
    <div class="item item5">5x</div>
    <div class="item item6">6x</div> -->

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-item属性 - flex-grow

  • flex-grow 决定了 flex items 如何扩展(拉伸/成长)

    • 可以设置任意非负数字（正小数、正整数、0），默认值是 0

    • 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效

    • 如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为

      • flex container 的剩余 size * flex-grow / sum
      • 在这里插入图片描述

    • flex items 扩展后的最终 size 不能超过 max-width\max-height

    • <!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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
      flex-grow: 0;
    }

    .item2 {
      flex-grow: 1;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <!-- <div class="item item4">4x</div>
    <div class="item item5">5x</div>
    <div class="item item6">6x</div> -->

  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

    • 在这里插入图片描述

flex-item属性 - flex-shrink

  • flex-shrink 决定了 flex items 如何收缩(缩小)
    • 可以设置任意非负数字（正小数、正整数、0），默认值是 1
    • 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
    • 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为
      • flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
  • flex items 收缩后的最终 size 不能小于 min-width\min-height

​ 在这里插入图片描述

<!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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

    }

    .item {
      width: 120px;
      height: 100px;
      background-color: red;
      flex-shrink: 0;
    }

    .item2 {
      flex-shrink: 1;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <div class="item item4">4x</div>
    <div class="item item5">5x</div>


  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-item属性 - flex-basis

  • flex-basis 用来设置 flex items 在 main axis 方向上的 base size

    • auto（默认值）、具体的宽度数值（100px）

  • 决定 flex items 最终 base size 的因素，从优先级高到低

    • max-width\max-height\min-width\min-height
    • flex-basis
    • width\height
    • 内容本身的 size

  • 在这里插入图片描述

  • <!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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

    }

    .item {
      /* width: 120px; */
      flex-basis: 120px;
      height: 100px;
      background-color: red;

    }

   
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x456464654coderlin_why_lin</div>
    <div class="item item3">3x</div>



  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

flex-item属性 - flex属性

  • flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

  • 在这里插入图片描述

  • 单值语法: 值必须为以下其中之一:

    • 一个无单位数(): 它会被当作的值。
    • 一个有效的宽度(width)值: 它会被当作 的值。
    • 关键字none，auto或initial.

  • 双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。

    • 第二个值必须为以下之一：
      • 一个无单位数：它会被当作 的值。
      • 一个有效的宽度值: 它会被当作 的值。

  • 三值语法:

    • 第一个值必须为一个无单位数，并且它会被当作 的值。
    • 第二个值必须为一个无单位数，并且它会被当作 的值。
    • 第三个值必须为一个有效的宽度值， 并且它会被当作 的值。

  • 在这里插入图片描述

<!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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

    }

    .item {
      width: 120px;

      height: 100px;
      background-color: red;
      /* flex-grow flex-shrink flex-basis */
      /* none: 0 0 auto */
      /* auto: 1 1 auto */
      flex: auto;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <!-- <div class="item item3">3x</div> -->



  </div>

  <script src="./js/itemRandomColor.js"></script>
</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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

    }

    .container>i {
      width: 140px;
    }

    .item {
      width: 140px;

      height: 140px;
      background-color: red;

    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1x</div>
    <div class="item item2">2x</div>
    <div class="item item3">3x</div>
    <div class="item item3">3x</div>
    <div class="item item3">3x</div>
    <!-- i元素的个数是列数-2 -->
    <!-- i 不用给高度 -->
    <i></i>



  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

itemRandomColor.js

function getRandomColor() {
  return `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
}

const itemEls = document.querySelectorAll(".item")
for (const item of itemEls) {
  item.style.backgroundColor = getRandomColor()
}
小林芝คิดถึง
关注
弹性盒子(Flex Box)详解
web$-小白
07-24 3万+
弹性盒子 ,flex display
说说flexbox（弹性盒布局模型）及适用场景？
常来常往，共同成长
03-08 1840
Flexible Box简称flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局 采用Flex布局的元素，称为flex容器container 它的所有子元素自动成为容器成员，称为flex项目item
flexbox的基本概念
aboutmn的博客
06-30 2086
灵活框模块（通常称为flexbox）被设计为一维布局模型，并且是一种可以在界面中的项目之间提供空间分布并具有强大的对齐功能的方法。 本文概述了flexbox的主要功能，我们将在其余这些指南中对其进行更详细的探讨。 当我们将flexbox描述为一维时，我们所描述的事实是flexbox一次处理一个维度中的布局-无论是行还是列。 这可以与CSS网格布局的二维模型（可同时控制列和行）形成对比。 flexbox的两个轴 使用flexbox时，您需要考虑两个轴-主轴和横轴。 主轴由flex-direction属性定义，
深入理解flexbox
郭大路路
09-19 580
Flexbox 是一個 CSS3 的盒子模型 ( box model )，顧名思義它就是一個靈活的盒子 ( Flexible Box )，為什麼最近這個屬性才紅起來呢？最主要也是因為 CSS3 的規範終於普及 ( 或 IE 終於敗亡 )，加上行動裝置的發展促成了響應式布局興起，自適應長寬彈性相當大的 Flexbox 就趁勢而起了。   Flexbox 模型概念 第一步要來看 Flexbox ...
flexbox简介
weixin_34175509的博客
10-22 130
flexbox简介 什么是flexbox flexbox是一种新的布局方式，这种布局方式是2009年W3C提出的方案。它可以简便，完整，完成页面的布局。目前，它已经得到所有浏览器的支持。 但是flexbox从2009年以来，有各种版本的变化，比如2009年版本和2011年版本差别比较大。 为什么要有flexbox 每个新事物出现都有其历史使命的。flexbox也是如此，传统的布局依赖于屏幕的宽度和...
Flex布局
03-29
Flex布局，全称为Flexible Box，是W3C在2009年提出的一种新的网页布局方案，旨在解决传统CSS布局模式在处理复杂和动态内容时的局限性。它特别适用于移动设备上的H5页面和微信小程序等场景，能轻松实现各种复杂的页面...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项的高度变为最高子项的...
微信小程序+Flex布局示例源代码
05-06
在这个"微信小程序+Flex布局示例源代码"中，我们将深入探讨Flex布局在微信小程序中的应用。 Flex布局，全称为Flexible Box布局，是CSS3中的一种新的布局模式，旨在解决传统盒模型在处理复杂或响应式布局时的困难。...
弹性盒子（flexbox）布局属性详解
热门推荐
橘猫吃不胖的博客
10-28 3万+
弹性盒子布局属性详解1 弹性盒子概述2 基本概念3 常用属性3.1 布局方向flex-direction3.2 环绕效果flex-wrap3.3 水平对齐方式justify-content3.4 交叉轴对齐方式align-items3.5 轴线对齐方式align-content4 项目属性(item)4.1 排列顺序order4.2 放大比例flex-grow4.3 缩小比例flex-shrink4.4 单个对齐方式align-self4.5 综合属性flex 1 弹性盒子概述 Flexbox 是 flex
10分钟学会基本的 Flexbox 布局
momoda111的博客
08-10 3814
什么是 Flexbox ？ Flexbox 是 flexible box 的简称（愚人码头注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动
flexbox(上)
本杰明的博客
06-27 1141
flexbox是什么Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。抛开浏览器兼容性，对于移动端h5开发，简直是布局的神兵利器采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。属性列表关于flex布局，有12个属性， 其中6个设置在容
reactnative布局与适配
weixin_30879169的博客
03-13 539
一、reactnative布局采用flexbox布局 Flexbox是什么 根据规范中的描述可知道，Flexbox模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调整和分配元素和空间两者之关的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。 这样听起来是不是太官方了，其实我也明白这种感觉。 如何开始使用Flexbox 这是每个人都会...
iOS 上的 FlexBox 布局 为什么要了解 FlexBox?
CSDN_Liuzongyi的博客
01-02 2225
最近时不时的听到关于 FlexBox 的声音，除了在 Weex 以及 React Native 两个著名的跨平台项目里有用到 FlexBox 外，AsyncDisplayKit 也同样引入了 FlexBox 。 先说说 iOS 本身提供给我们 2 种布局方式: Frame,直接设置横纵坐标，并指定宽高。 Auto Layout，通过设置
彻底理解Flexbox
LiuHe
06-02 1万+
注：本文翻译自CHRIS COYIER的A Complete Guide to Flexbox这篇文章，点击链接可前往原版博文：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Tips: This tutorial is translated from the most popular article in CSS-Tricks -
理解 Flexbox：你需要知道的一切
随雨听风
02-22 1959
本文转载自：http://www.codeceo.com/article/understanding-flexbox-everything-you-need-to-know.html?ref=myread 来源：大漠 这篇文章介绍了Flexbox模块所有基本概念，而且是介绍Flexbox模块的很好的一篇文章，所以这篇文章非常的长，你要有所准备。
使用HTML、CSS和JavaScript创建图像缩放功能
最新发布
2301_79858914的博客
10-13 394
通过以上步骤，我们成功创建了一个简单的图像缩放功能。用户只需点击图像，就能查看更大的版本，提升了网站的互动性和用户体验。希望你能在自己的项目中实现这个功能，欢迎分享你的经验和想法！你可以根据需要进一步修改或添加细节。
使用纯CSS和JavaScript来实现一个转盘抽奖效果
weixin_46328739的博客
10-10 761
使用纯CSS和JavaScript来实现一个转盘抽奖效果,抽到机率相同。
前端Flex布局全面解析与代码实例
资源摘要信息: "flex布局代码及语法讲解" 在现代前端开发中，CSS Flex布局已经成为设计灵活界面的基石之一。Flex布局，全称为弹性盒子布局（Flexible Box Layout），是一种用于在不同屏幕尺寸和设备上提供一致布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值