Logo

菜单

发布于 2026-01-06 9 阅读
0

Flexbox-zombies Flexbox-zombies 2020年你还在使用Flexbox吗？

Flexbox 僵尸

Flexbox 僵尸

2020年你还在使用Flexbox吗？

Flexbox 僵尸

这篇文章最初于 2018 年 4 月发布在我的个人博客上：https://waylonwalker.com/blog/flexbox-zombies/。截图直接取自该网站。

我最近完成了 flexbox-zombies 的课程，学习了更多关于 flexbox 的知识，并熟练掌握了它。我可以毫不夸张地说，这门课程彻底改变了我创建布局的方式。现在 flexbox 对我来说非常直观。这门课程的精髓在于它对概念的讲解非常透彻，并且提供了大量的示例，让你能够快速上手。

flexbox-zombies

这是与戴夫进行决赛的片段。

基本设置

Flexbox 需要一个包装容器才能工作，我将其称为 flex 容器，并将该容器中的项目称为项目。

标记

本文将使用以下标记，每个标记应用不同的 CSS 样式。

注：动画容器的设计灵感来源于 flexbox-zombies 课程。我非常喜欢它能够让你看到每个布局的响应式特性。在最初的示例中，其原理可能并不明显，但随着我们深入学习，如果我们在动态布局中查看一些 flexbox 参数，它们的意义就会更加清晰，因为 flexbox 的设计初衷就是为了构建响应式设计。

<div class='flex_container'>
    <div class='item'>1</div>
    <div class='item'>2</div>
    <div class='item'>3</div>
    <div class='item'>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

基本标记

基础样式

    .item {
        color: #6394C8;
        font-size: 1.5rem;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        width: 100px;
        background: #351D57;
        margin: 5px;
        border: 2px solid #A83E75;
        box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .6);
    }

    .flex_container {
        padding: 1rem;
        box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, .6);
        background: rgba(99, 148, 200, .2);
        animation: animate_container 2s cubic-bezier(.66, -0.0, .28, 1.0) infinite both alternate;
    }

    /* Animate the .flex_container to show responsiveness */

    .flex_container:hover {
    /* But not on hover, let the user pause the annimation*/
        animation: none 
    }

    @keyframes animate_container {
        0%{
            width: 95%;
        }

        20% {
            width: 95%;
        }

        80% {
            width: 200px;
        }

        100% {
            width: 200px;
        }
    }
Enter fullscreen mode Exit fullscreen mode

基本技巧

基本技巧

1. 打开弩

应用于柔性容器

display: flex;

启用 flexbox 布局后，所有子元素都会在父容器的左上角对齐成一行。默认情况下，它们会缩小到最小内容尺寸，但不会自动增大到超过其指定尺寸。

    .flex_container {
                display: flex;
        }
Enter fullscreen mode Exit fullscreen mode

启动弩

2. 必要时瞄准

应用于柔性容器

此参数决定 flexbox 容器中 flex 元素的朝向。

示例 flex-direction: row
选项=('row'(default), 'column', 'row-reverse', 'column-reverse')

排

.flex_container {
            display: flex;
            flex-direction: row;
    }
Enter fullscreen mode Exit fullscreen mode

排

柱子

.flex_container {
            display: flex;
            flex-direction: column;
    }
Enter fullscreen mode Exit fullscreen mode

柱子

行反转

.flex_container {
            display: flex;
            flex-direction: row-reverse;
    }
Enter fullscreen mode Exit fullscreen mode

行反转

列反转

.flex_container {
            display: flex;
            flex-direction: column-rerverse;
    }
Enter fullscreen mode Exit fullscreen mode

列反转

3. 将它们沿着红色 Justify Laser 线对齐

应用于柔性容器

此参数决定弹性容器内弹性项目的对齐方式。可以理解为弹性项目之间的间距或位置。

示例 justify-content: flex-end;
选项= ( flex-start, flex-end, space-between, space-around, space-evenly, stretch, center, start, end, left, right)

弹性启动

.flex_container {
            display: flex;
            justify-content: flex-start;
    }
Enter fullscreen mode Exit fullscreen mode

弹性启动

柔性端

.flex_container {
            display: flex;
            justify-content: flex-end;
    }
Enter fullscreen mode Exit fullscreen mode

柔性端

空间

.flex_container {
            display: flex;
            justify-content:space-between;
    }
Enter fullscreen mode Exit fullscreen mode

空间

周围空间

.flex_container {
            display: flex;
            justify-content: space-around;
    }
Enter fullscreen mode Exit fullscreen mode

周围空间

均匀分布

.flex_container {
            display: flex;
            justify-content: space-evenly;
    }
Enter fullscreen mode Exit fullscreen mode

均匀分布

中心

.flex_container {
            display: flex;
            justify-content: center;
    }
Enter fullscreen mode Exit fullscreen mode

中心

3b. 将它们沿蓝色对准激光线对齐

应用于柔性容器

  • align-items: flex-end;
  • options = ('flex-start', 'flex-end', 'normal', 'end', 'self-start', 'self-end', 'center', 'start' 'end')

弹性启动

.flex_container {
            display: flex;
            justify-content: flex-start;
    }
Enter fullscreen mode Exit fullscreen mode

弹性启动

柔性端

.flex_container {
            display: flex;
            justify-content: flex-end;
    }
Enter fullscreen mode Exit fullscreen mode

柔性端

中心

.flex_container {
            display: flex;
            justify-content: center;
    }
Enter fullscreen mode Exit fullscreen mode

中心

4. 处理任何特殊调整

适用于项目

  • align-self: flex-start;
  • options = ( 'flex-start', 'flex-end', 'normal', 'end', 'self-start', 'self-end', 'center', 'start', 'end')

结合

`align-self` 属性用于处理一次性的对齐方式，并应用于元素本身。所有参数都与之前相同align-items。在本例中，我们将把前面所有示例的对齐方式合并为一个。

.flex_container {
    display: flex; 
     } 
.item:nth-of-type(1){
     align-self: flex-start  
     }
.item:nth-of-type(2){
     align-self: center
     }
.item:nth-of-type(3){
     height: auto; align-self: stretch;
     }
.item:nth-of-type(4){
     height: auto; align-self: flex-end;
     }
Enter fullscreen mode Exit fullscreen mode

替代文字

6. 沿红色正义激光线生长

适用于项目

  • flex-grow: 1

弹性生长

放置flex-grow: 1;该物品后3，它将占用所有可用的空闲空间。

.flex_container {
            display: flex;
    }
.item:nth-of-type(3) {
    flex-grow: 1
}
Enter fullscreen mode Exit fullscreen mode

弹性生长

多重灵活增长

将此flex-grow: 2;物品放置于桌面上1，占用可用空间的速度将是原来的两倍。3

.flex_container {
            display: flex;
            justify-content: flex-start;
    }
.item:nth-of-type(3) {
    flex-grow: 1
}
.item:nth-of-type(1) {
    flex-grow: 2
}
Enter fullscreen mode Exit fullscreen mode

多重灵活增长

7. 沿红色对齐激光线设置物品长度

按重要性顺序应用于各项

  • min-width
  • max-width
  • flex-basis
  • width

8. 故障

应用于项目时，
其行为类似于 z-index。

  • order- 接受整数值

订单 1

.flex_container {
            display: flex;
    }
.item:nth-of-type(3) {
    order: 1
}
Enter fullscreen mode Exit fullscreen mode

订单 1

顺序 -1

.flex_container {
            display: flex;
    }
.item:nth-of-type(3) {
    order: -1
}
Enter fullscreen mode Exit fullscreen mode

顺序 -1

9. 开通你自己的线路

应用于柔性容器

  • flex-wrap-选项=(wrap, nowrap(default))
  • 比起收缩膜，我更喜欢包装膜。
  • 但完全包裹后仍会收缩。

走自己的路

裹

.flex_container {
            display: flex;
            flex-wrap: wrap;
    }
Enter fullscreen mode Exit fullscreen mode

裹

10. 对齐换行内容

应用于柔性容器

  • align-content- 与 align-items 具有相同的规格，但适用于包装内容。

裹

.flex_container {
            display: flex;
            height: 700px;
            flex-wrap: wrap;
            align-content: center;
    }
Enter fullscreen mode Exit fullscreen mode

对齐换行内容<br>

11. 快捷方式

弹性

应用于弹性项目

  • flex: grow, shrink, basis
  • 默认值 -flex: 1 1 0px
  • 设置flex: none等同于flex: 0 0 auto

柔性流

应用于柔性容器

  • flex: flex-direction flex-wrap

第七章：在一个完美的世界里（弹性基础）

flex-basis

  • 起始尺寸、理想尺寸、假设尺寸
  • 适用于项目
  • 覆盖宽度
  • 必要时收紧胫骨

水平拍摄时，它控制宽度。

垂直拍摄时，它控制高度。

2020年你还在使用Flexbox吗？

@thepracticaldev是否

既然它们是开源的，你可以在它们的 git 仓库中自行搜索。

我在仪表盘里找到了这个元素。
dev.to 中的 Flexbox

以及颜色选择元素。

dev.to 颜色选择元素

我愿意

我差不多两年前在学习 Flexbox Zombies 课程时写了这篇文章/这些节点，它真的让我印象深刻。我觉得大部分内容都已经深深印在我的脑海里，成了我的第二天性，以至于我很少会想到用网格布局😲。偶尔需要视觉上的启发时，这篇文章也帮了我很大的忙。

发推文给我，或者在下面留言。

欢迎访问我的个人网站，查看我的其他博客文章。

文章来源：https://dev.to/waylonwalker/flexbox-zombies-2o00
使用 CSS 变量实现深色模式 什...
你需要的 Windows 命令速查表