僵尸僵尸

发表于 2020年1 月15日星期三下午 5:10:06

僵尸僵尸

该帖子最初于2018年4月发布在我的个人博客中https://waylonwalker.com/blog/flexbox-zombies/。屏幕截图直接从网站获取。

我最近完成了flexbox-zombies价格，以学习更多关于flexbox的知识，并精通它。我可以说这门课改变了我创建布局的方式。 Flexbox现在非常直观。本价格真正擅长的是解释概念并通过大量示例使您受益匪浅，这些示例可以使您快速完成工作。

最后一轮对阵戴夫的片段

基本设定

Flexbox需要盘点容器才能工作，我将其称为flex容器，并将该容器中的项目称为项。

标记

在整篇文章中，我将使用以下标记，每个标记都应用不同的CSS。

note注意动画容器受flexbox-zombies价格的启发。我非常喜欢它如何使您看到每个布局的响应能力。在早期的示例中，推理可能不是很明显，但是随着我们在动态布局上查看它们，一些flexbox参数将变得更加有意义，因为flexbox是为构建响应式设计而设计的。

 class='flex_container'>
     class='item'>1


 class='item'>2


 class='item'>3


 class='item'>4

基本款式

    .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;
        }
    }

基本技术

1.打开the

应用于flex容器

display: flex;

在flex容器上打开flexbox将导致所有子元素在父容器的左上角对齐。通过默认，它们将缩小到最小内容大小，但不会自动增长到大于其指定大小的大小。

    .flex_container {
                display: flex;
        }

2.必要时瞄准

应用于flex容器

此参数确定flexbox容器将flex项目定向的方向。

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

行

.flex_container {
            display: flex;
            flex-direction: row;
    }

柱

.flex_container {
            display: flex;
            flex-direction: column;
    }

行反向

.flex_container {
            display: flex;
            flex-direction: row-reverse;
    }

列反转

.flex_container {
            display: flex;
            flex-direction: column-rerverse;
    }

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

应用于flex容器

此参数确定flex容器内的flex项目的合理性。考虑弹性项目周围的间距或位置。

例 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;
    }

柔性端

.flex_container {
            display: flex;
            justify-content: flex-end;
    }

间隔

.flex_container {
            display: flex;
            justify-content:space-between;
    }

周围空间

.flex_container {
            display: flex;
            justify-content: space-around;
    }

空间均匀

.flex_container {
            display: flex;
            justify-content: space-evenly;
    }

中央

.flex_container {
            display: flex;
            justify-content: center;
    }

3b。将它们沿着蓝色对准激光器对准

应用于flex容器

align-items: flex-end;
选项=（’flex-start’，’flex-end’，’normal’，’end’，’self-start’，’self-end’，’center’，’start”end’）

弹性启动

.flex_container {
            display: flex;
            justify-content: flex-start;
    }

柔性端

.flex_container {
            display: flex;
            justify-content: flex-end;
    }

中央

.flex_container {
            display: flex;
            justify-content: center;
    }

4.注意任何一次性调整

适用于物品

align-self: flex-start;
选项=（'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;
     }

6.沿红色Justify激光生长

适用于物品

flex-grow: 1

弹性成长

通过设置 flex-grow: 1; 在项目上 3 它将占用任何可用的可用空间。

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

多重弯曲生长

通过设置 flex-grow: 2; 在项目上 1 将会以2倍的速度占用可用空间 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
}

7.沿着红色“对正激光”设置物品的长度

适用于物品

按重要性顺序

min-width
max-width
flex-basis
width

8.乱序

适用于物品
行为类似于z-index

order -取整数

订单1

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

-1

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

9.得到你自己的线

应用于flex容器

flex-wrap -选项= (wrap, nowrap(default))
倾向于点评而不是收缩
但完全点评后仍会收缩

点评

.flex_container {
            display: flex;
            flex-wrap: wrap;
    }

10.对齐盘点内容

应用于flex容器

align-content -与align-items相同的规格，但适用于盘点的内容。

点评

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

11.捷径

柔性

适用于弹性项目

flex: grow, shrink, basis
默认值- flex: 1 1 0px
设置 flex: none 相当于 flex: 0 0 auto

柔性流

应用于flex容器

flex: flex-direction flex-wrap

第7章：完美世界（弹性基础）

flex-basis

起点，理想尺寸，假设尺寸
适用于物品
覆盖宽度
必要时会收缩

水平拍摄时，控制宽度

垂直拍摄时，它可以控制高度

您还在2020年使用flexbox吗？

@thepracticaldev
是否

既然它们是开源的，那么您可以在其git repo中进行搜索。

我在仪表板内部找到了这个元素。

并在颜色选择元素中。

我做

我在2年前就在Flexbox僵尸价格中学习Flexbox时，发表了这篇文章/节点，它确实使我感到困惑。我觉得其中大部分已经扎根在我的大脑中，并感觉到了第二天性，以至于我几乎找不到自己的位置。在我需要视觉刷新的情况下，这篇文章对我很有帮助。

在我身上推特，或将它们放在下方。

在我的个人网站上查看其他博客。

资讯来源：由0x资讯编译自DEV，原文：https://dev.to/waylonwalker/flexbox-zombies-2o00 ，版权归作者所有，未经许可，不得转载

僵尸僵尸

基本设定

标记

基本款式

基本技术

1.打开the

2.必要时瞄准

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

3b。将它们沿着蓝色对准激光器对准

4.注意任何一次性调整

6.沿红色Justify激光生长

7.沿着红色“对正激光”设置物品的长度

8.乱序

9.得到你自己的线

10.对齐盘点内容

11.捷径

第7章：完美世界（弹性基础）

@thepracticaldev 是否

我做

@thepracticaldev
是否