论坛 › 马黑黑教程专版 › flex弹性布局简单演示

马黑黑 发表于 2026-3-22 18:13

flex弹性布局简单演示

<style>
        .stage-wrapper { width: 95%; height: 820px; display: flex; flex-direction: column; gap: 50px; padding: 20px; margin: 20px auto; }
        .stage-wrapper * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: tan transparent; }
        .input-box { flex-grow: 1; flex: 1 1 auto; }
        .input-box:first-child { display: grid; place-items: center; overflow: auto; max-height: 200px;border: 0px dotted gray; }
        .input-box:first-child:hover { border: 1px dotted gray; }
        .input-box textarea { width: 100%; height: 100%; font: normal 16px/1.3 monospace; background: beige; padding: 10px; resize: none; overflow: auto; border-radius: 8px; box-shadow: 0 0 4px gray; }
        .btns { text-align: center; }
        .btns button { margin-right: 30px; }
</style>

<div class="stage-wrapper">
        <div class="input-box" title="预览区">预览区</div>
        <div class="input-box">
                <textarea placeholder="css代码" title="编辑 css 代码"></textarea>
        </div>
        <div class="input-box">
                <textarea placeholder="html代码" title="编辑 html 代码"></textarea>
        </div>
</div>
<div class="btns">
        <button value="0">预览效果</button>
        <button value="1">复原代码</button>
</div>

<script>
        const inputBoxes = document.querySelectorAll('.input-box');
        const textareas = document.querySelectorAll('.input-box textarea');
        const btns = document.querySelectorAll('.btns button');

        const codes = [
                `<style>
    .mum {
      display: flex; /* 核心 ：弹性布局 */
      flex-direction: row; /* 主轴方向 */
      gap: 10px; /* 子元素间距 */
      width: 600px;
      height: 140px;
      border: 2px solid goldenrod;
    }
    .son {
      background: papayawhip;
      padding: 10px;
      flex-grow: 1; /* 项目放大比例 ：1 表示均摊剩余空间 */
    }
    .fat {
      flex-grow: 2; /* 放大比例 ：放大两倍 */
    }
</style>`,
                `<div class="mum">
    <div class="son">son</div>
    <div class="son fat">son fat</div>
    <div class="son">son</div>
</div>`
        ];

        textareas.value = codes;
        textareas.value = codes;

btns.forEach(btn => {
        btn.onclick = () => {
                if (btn.value === '1') {
                        textareas.value = codes;
                        textareas.value = codes;
                }
                inputBoxes.innerHTML = textareas.value + textareas.value;
        };
});

</script>

马黑黑 发表于 2026-3-22 18:20

【附】flex弹性布局常用属性汇总 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

马黑黑 发表于 2026-3-22 18:22

一楼 CSS代码 和 HTML代码 均可以修改，改好后点击预览按钮可以查看修改后的效果，点击复原代码可以恢复初始代码

红影 发表于 2026-3-22 21:15

弹性布局能自动计算和排布元素空间，很有用的代码。
感谢黑黑的讲解{:4_187:}

马黑黑 发表于 2026-3-23 08:32

红影 发表于 2026-3-22 21:15
弹性布局能自动计算和排布元素空间，很有用的代码。
感谢黑黑的讲解

flex布局已被广泛使用，但里面的概念、属性接受起来有一定难度，初学者可能需要花点时间慢慢体会

小辣椒 发表于 2026-3-23 21:08

黑黑花的功夫真的不少哦，辛苦的{:4_187:}

马黑黑 发表于 2026-3-23 21:35

小辣椒 发表于 2026-3-23 21:08
黑黑花的功夫真的不少哦，辛苦的

手掌辛苦

小辣椒 发表于 2026-3-23 21:43

马黑黑 发表于 2026-3-23 21:35
手掌辛苦

老首长正在外面潇洒的，估计明后天可以回来了

马黑黑 发表于 2026-3-23 21:44

小辣椒 发表于 2026-3-23 21:43
老首长正在外面潇洒的，估计明后天可以回来了

{:4_173:}

红影 发表于 2026-3-23 22:50

马黑黑 发表于 2026-3-23 08:32
flex布局已被广泛使用，但里面的概念、属性接受起来有一定难度，初学者可能需要花点时间慢慢体会

等真正领会了，就能使用了。

马黑黑 发表于 2026-3-23 23:04

红影 发表于 2026-3-23 22:50
等真正领会了，就能使用了。

说得对

红影 发表于 2026-3-25 16:12

马黑黑 发表于 2026-3-23 23:04
说得对

运用得灵活，会让帖子布置得完全合乎心意了{:4_187:}

马黑黑 发表于 2026-3-25 17:17

红影 发表于 2026-3-25 16:12
运用得灵活，会让帖子布置得完全合乎心意了

差不多是酱紫

红影 发表于 2026-3-26 22:20

马黑黑 发表于 2026-3-25 17:17
差不多是酱紫

记住它的功能是还挺要紧的。

马黑黑 发表于 2026-3-26 23:24

红影 发表于 2026-3-26 22:20
记住它的功能是还挺要紧的。

如果用得上的话

查看完整版本: flex弹性布局简单演示