CSS3的软盒的详细教程

本文主要介绍了CSS3的软盒的详细教程，灵活的盒子是在布局设计的一般模型，需要的朋友可以参考一下。
什么是灵活的盒子灵活的可扩展性，箱盒，可以理解为一种新的盒模型——型；mdash；伸缩盒模型。通过CSS3规范提出，这是一个新的，在原有的基础上扩展块，布局模式生成内联块和内联。
浏览器的兼容性

作为一个非常现实的开发者，无论是否关注一项新技术，首先要考虑的是它的浏览器的兼容性。
可以看出，现代浏览器基本上是支持的。IE10也支持IE浏览器（Safari和MS - -webkit-前缀）。移动终端的支持比较好。不支持是歌剧的唯一平台，我们不要玩_rarr RARR。

因此，奥巴马同志说：膨胀箱模型是好的和有前途的。
伸缩箱的基本概念

伸缩箱最大的特点或优点是考虑到当前高房价与人们日益增长的住房需求之间的矛盾。住房面积是有限的，但我们的扩展框可以把房子分配给你最合理和有效。如果你有更多的面积，你会有更多的点为您的组。如果你有一个较小的区域，你将能够挤压更多和更少的点。总之，没有人会住在街上。（溢出）

既然我们已经提到了房屋和家庭的关系，家庭的安排，自然需要一个特定的方向。为块级元素，布局的延伸，是自上而下的，即垂直。内联元素，布局的延伸方向是从左到右，这是横向的。和伸缩箱，其方向是可变的，无论是纵向和横向的，根据你的设置。
膨胀箱模型的基本术语

可伸缩盒模型的思想与一般的块级单元和行单元布局思想有很大的不同。介绍了一些新概念和术语。
伸缩集装箱箱
这是用来分隔的房子，这是一个神奇的房子，使之令人惊叹，声明显示属性为flex或内联flex可以~

伸缩项可伸缩项
在房子里的人，他们都有自己的住房面积。

为了解释图像，我们使用代码来解释它。

xml代码将内容复制到剪贴板。
项目1
项目2
项目3
CSS设置为：

CSS代码将内容复制到剪贴板。
{容器。
显示：flex；
宽度：300px；
身高：100px；
…
}

它在这里显示：内联flex，似乎可以。
对他们来说，我们需要为他们安排住房面积的比例。我们将用最简单、最健康的1:1:1吧。我们将在Flex属性中声明该比例。

CSS代码将内容复制到剪贴板。
{。item-1
Flex：1；
…
}
{。ITEM-2
Flex：1；
…
}
{。item-3
Flex：1；
…
}

我们的大房子分为三个隔间和完美的公寓，三个共用一个房间。

如果有人想住大一点的房子，我们可以直接改变Flex的比例。

CSS代码将内容复制到剪贴板。
{。item-1
Flex：1；
…
}
{。ITEM-2
Flex：1；
…
}
{。item-3
Flex：2；
…
}

很方便吗

轴轴
我们可以看到图中有两个轴，主轴和副轴（垂直于主轴）分别标出，但实际上主轴不确定，是由我们规定的。
1。这个属性指定哪个轴是主轴。
2。此属性设置了在主轴方向上的扩展项的安排，稍后将对此进行说明。
三.对齐此属性与上面的验证内容相对应，指示在辅助轴上的扩展项的排列。
4。自对齐，此属性指定辅助轴上特定扩展元素的布局方式。设置一个元素的属性将覆盖其对齐项目属性。这是属性，使得元素更有魅力，不是普通的方式。

弯曲的方向
当我们不想沿着默认方向分割房屋时，我们可以改变Flex方向属性的值来改变主轴和方向。属性的默认值是行。

CSS代码将内容复制到剪贴板。
{容器。
行反转；
…
}

顾名思义，这将依次打开扩展项的方向：
当此属性设置为列时，主轴和副轴将被调整，并且元件的方位也将被改变。

CSS代码将内容复制到剪贴板。
{容器。
弯曲方向：圆柱；
…
}

至于Flex的含义：列反向，我不必说太多。

证明内容
有时候，人住旁边，稍有差距会很困难，连过道都没有，隐私也不能保证正确。这时，我们可以改变分配政策，不再按比例，而是配额分配，每个人的面积都确定了。更多的房子面积变为公共区。

CSS代码将内容复制到剪贴板。
{项目。
宽度：80px；
…
}
…
设置宽度属性之后，您还应该记住删除Flex属性的声明，或者Flex属性的效果仍然覆盖宽度。
同时，如果没有设置宽度属性，则元素的宽度将被表示为内容的宽度。这意味着，当扩展项中没有内容时，它将不会呈现与显示相同的内容：无。
此时，可扩展项目的位置可以通过声明容器上的验证内容属性来安排：

CSS代码将内容复制到剪贴板。
{。内容
证明内容：Flex开始Flex端中心空间之间的| | | |周围空间；
}

对齐项目
这个属性改变了元素排列在辅助轴上的方式。在本例中，原始子轴中的元素高度为100%。设置对齐项属性后，它的高度性能将发生变化。

CSS代码将内容复制到剪贴板。
{。内容
调整项目：Flex开始Flex端中心baselinebaseline | | | |伸展；
}

说到这个，伸缩项目的具体性能实际上是可以想象的，如果你无法想象的话，你可以自己尝试一下。

秩序
在一个关于这个属性扩展的语句中，可以忽略HTML结构的顺序，沿着顺向方向的顺序顺序：

CSS代码将内容复制到剪贴板。
{。item-1
订单：3；
…
}
{。ITEM-2
订单：1；
…
}
{。item-3
订单：2；
…
}

Flex包
此属性的默认值是不换行。也就是说，忽略扩展项的宽度，控制需要多少个住房区域，并根据Flex属性分配分布。不允许行更改。

CSS代码将内容复制到剪贴板。
{容器。
伸缩包：包|反向| nowrap
}

{项目。
宽度：150px；
}

flex增长，弯曲收缩和弯曲基础
上面提到的Flex属性实际上是三个属性的一个简短形式，三个属性具有相似性，它们是项目和项目之间的分配空间的相对比例，不同之处在于：
1。Flex扩展属性：属性值是占用扩展项的空间与其他扩展项（声明Flex相关属性的项目）的比率。
2。Flex收缩属性是收缩与其他扩展项的比率，也就是说，当Flex收缩时：3，其他项目占用的空间是其他项目的1 3。
三.Flex基属性：属性值是此项占用的空间的百分比。

注意：对于Flex基础属性，当所有属性值相加为100%时，元素不会溢出，但占用22的空间大小将遵循百分比比例，也就是说，当有三个可扩展项和Flex基值为50%时，性能和三项都是flex：1；相同的。

灵活的盒子布局模式在响应发展中特别有用。在不同的终端之间设置空间分配关系将成为一件非常简单的事情，扩展箱的布局和布局布局中流体的布局更好。他们仍然可以结合在一起，看看开发人员发挥了他们的聪明才智。