CSS 中 关于 Overflow，你需要了解的这些知识点
在CSS中，当一个元素的内容太大而无法容纳时，我们可以对其进行控制。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写形式。
在本文中，将会介绍这些属性，然后我们将一起深入讨论与overflow相关的一些概念和用例。你准备好了吗？get it!
要使用overflow属性，我们需要确保将其应用到的元素具有以下特征：
- 块级元素(例如:div、section)，通过height或max-height设置高度。通过设置高度，我的意思是项目应该有内容(不是空的)，也不是添加一个显式的高度。
- 或将white-space设置为nowrap 的元素
overflow属性可以有如下属性：
❝
visible, hidden, scroll, auto
❞
由于overflow是一种简写属性，因此它可以接受一个或两个值。第一个值用于水平轴，第二个值用于垂直轴。
overflow 默认值为 visible，其中的内容可以超出其父值。可以这样设置:
有趣的一面是，当一个轴设置为visible，而另一轴设置为auto时，visible的轴将计算为auto。
[MDN][2] 上这样说到：
❝
注意: 设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto`。
❞
例如，如果我们用以下内容设置一个元素:
overflow属性的计算值将为auto auto。
当内容比其父内容长时，它将被剪切。但是，可以使用 Javascript 滚动内容。
在上图中，无论内容是否长，滚动条总是可见的。注意，这取决于操作系统。
auto这是一个聪明的关键字，仅当内容比其容器长时才显示滚动条。
注意，在图中，只有当内容比其容器长时，滚动条才可见。接下来，我们将讨论与overflow相关的longhand属性
该家伙负责x轴或元素的水平边。
该家伙负责y轴或元素的垂直边。
我们可以通过水平裁剪内容并使其滚动来创建快速简单的滑块。
在上面的模型中，我们有水平放置的卡片，还有一个滚动条，可以滚动并显示更多内容。为此，我们需要执行以下操作：
- 将卡片显示在同一行，为此使用flexbox
- 向容器中添加overflow-x
它可以在桌面浏览器上工作。然而，在Safari上对iOS(12.4.1)进行测试时，滚动并没有起作用。经过反复试验，当我为子项添加宽度时，滚动起作用了，在iOS(13.3)上运行就没有问题啦。
事例源码：https://codepen.io/shadeed/pen/bfb886326f2066b6ae0a8b641ecf68b4?editors=1100
当模态内容太长时，我们可以很容易地使区域可滚动。要做到这一点，我们应该做到以下几点
- 设置模态框的最大高度
- 模态框 body 应占用全部可用空间
事例源码：https://codepen.io/shadeed/pen/1997908941279f0af3d6c7f83d6efdc8?editors=0100
当我们有一张卡并且希望其角是圆的时，我们倾向于为顶部和底部的角添加border-radius，如下所示：
这可能需要很多工作，特别是如果卡片在移动设备上具有不同的设计。例如，它们不会彼此堆叠，而不是堆叠其子项。
在这种情况下，最好使overflow: hidden将其隐藏在包装器上，然后向其添加border-radius，这样我们只需要设置一个地方就行了。如下所示：
当涉及动画时，overflow: hidden的好处是：在剪辑时可以悬停显示的隐藏元素上。考虑下图：
在CSS中，如下所示：
我们有两个按钮，每个按钮都有一个伪元素，该元素相应地过渡到左侧和底部。如下所示：
事例源码：https://codepen.io/shadeed/pen/7b48418837470e173f7a6cd7bcc4a403?editors=0100
例如，当我们有一个滑动条时，仅仅添加overflow-x是不够的。在「Chrome iOS」上，我们需要手动滚动和移动内容。看下面的动图：
幸运的是，有一个属性可以增强滚动体验。
这称为「基于动量的滚动」。根据MDN：
「-webkit-overflow-scrolling」 属性控制元素在移动设备上是否使用滚动回弹效果。它有两个值：
「auto」：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。「touch」：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
下图是使用基于动量的滚动的效果。
根据CSS规范：
❝
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度块元素的属性)
❞
当一个inline-block元素的overflow值不是visible的时，这将导致该元素的底边根据其同级元素的文本基线对齐。
要解决该问题，我们可以主按钮添加overflow: hidden，并更改其对齐方式：
事例源码：https://codepen.io/shadeed/pen/291fda2293ed737f7eb7dc74a9318438?editors=1100
通常，我们会遇到水平滚动的问题，当原因未知时，滚动滚动会变得更加困难。在本节中，我将列出水平滚动的一些常见原因，以便大家以后在构建布局时可以想到到它们。
当元素的position值为absolute或fixed值时，就有可能导致水平滚动。当left，right值中的一个将元素定位在body元素外部时，可能会发生这种情况
要解决这个问题，首先需要检查为什么这个元素被放置在viewport之外。如果没有必要，则必须删除它或编辑position值。
CSS 网格有三种情况可以导致水平滚动，来看看它们。
「对列使用像素值」
当使用像素值时，这将在视口宽度较小时引起问题。见下文：
解决方案是重置列，只在有足够空间的视口上使用上面的列。
可能会遗忘要针对移动设备进行测试，因为最小宽度为300px，这将导致在某个点进行水平滚动。
一个简单的解决方法是将grid-template-columns重置为1fr，并在视口较大时对其进行更改。
源码地址：https://codepen.io/shadeed/pen/a874bf85a1acf2ee6f37a7f1d86ad3b2?editors=1100
处理内容中的长字或链接时，它应该换行，否则，将会出现水平滚动。
为了解决这个问题，我们需要中断长单词和链接。我们可以这样做
或者我们可以使用text-overflow：
既然我们已经知道了水平滚动的原因，我将介绍一些方法来帮助我们识别这些问题并解决它们。
通过添加这些内容，我们可以注意到哪些元素的宽度较大，因此我们可以解决问题。阿迪·奥斯曼尼（Addy Osmani）用他的简单脚本进一步完善了这一点：
该脚本的作用是使轮廓颜色随机化，而不是使所有轮廓都具有单一颜色，这将使其变得更容易。
在Firefox中，会向导致水平滚动的元素添加一个小标签。
有时，上述技术无效。在这种情况下，我要做的是打开DevTools，然后开始删除元素并注意。一旦水平滚动消失了，我就可以确定引起问题的元素。
最后，可以使用overflow-x：hidden解决水平滚动问题，但这一般是最后没办法的备用方案。
作者：Ahmad shaded 译者：前端小智 来源：sitepoint
原文：https://ishadeorddeed.com/article/overflow-css/
网络安全干货分享 | 域内提权之sAMAccountName欺骗
前言
最近整理了一些奇安信&华为大佬的课件资料+大厂面试课题，想要的可以私信自取，无偿赠送给粉丝朋友~
与标准用户帐户相比计算机帐户的名称末尾附加了$符号，默认情况下Microsoft操作系统缺乏可以防止许多攻击的安全控制和强化措施，此外多年来已经证明Windows生态系统中许多事物工作方式可以通过利用现有功能和工作流程来实现滥用
具体来说，活动目录中的每个帐户在sAMAccountName属性中都有自己的名称，但是由于没有控制导致可以任意使用，因此任何拥有控制权和对象(即机器帐户)的用户都可以修改此值，该修改的目的可能导致模拟域上的其他帐户，例如域控制器计算机帐户，Charlie Clark是第一个通过发布详细文章说明如何将这些漏洞武器化的人
在请求服务票证之前需要首先签发票证授予票证(TGT)，当为密钥分发中心 (KDC)中不存在的帐户请求服务票证时，密钥分发中心将跟进在该帐户上附加 $符号的搜索，将此行为与对sAMAccountName属性缺乏控制相结合，红队操作员可以利用它进行域权限提升，具体来说，可以请求域控制器帐户的票证授予票证，并且在任何服务票证请求之前恢复sAMAccountName属性值将强制KDC搜索域控制器的机器帐户并发出提升的服务票证代表域管理员
为了正确利用这种攻击进行域升级，用户需要拥有计算机帐户的权限才能修改sAMAccountName和servicePrincipalName属性，可以创建机器帐户的用户具有修改这些属性所需的权限，默认情况下，域用户的机器帐户配额设置为 10，这允许用户在域上创建机器帐户，或者可以从作为机器帐户所有者的帐户的角度进行此攻击，通过sAMAccountName模拟执行域升级包括以下步骤
- 创建机器帐户
- 清除servicePrincipalName属性
- 修改机器账户的sAMAccountName属性指向不带$符号的域控制器名称
- 为域控制器帐户请求TGT
- 将sAMAccountName属性恢复为其原始值或任何其他值
- 使用S4U2self方法请求服务票证
- 代表域管理员帐户接收服务票证
下图说明了sAMAccountName模拟技术的步骤：
漏洞发现
Microsoft已发布补丁以防止成功利用，但是在许多情况下补丁没有按时应用，这会产生一个可以在红队评估期间利用该技术的时间段，该技术的先决条件如下
- 缺少KB5008380和KB5008602安全补丁的域控制器
- 有效的域用户帐户
- 机器帐号配额大于0
需要访问内部网络，因此假设低权限帐户已被盗用，如上所述，机器帐户配额默认为10，因此唯一的要求是确定是否已应用补丁，这是微不足道的，可以通过为域用户帐户请求没有PAC的票证授予票证并观察base64票证大小(与使用PAC签发的票证相比更小)来实现，Rubeus可以与/nopac开关一起使用，为一个已知凭据的域帐户请求TGT
查看票证大小可以理解域控制器很容易受到攻击，因为PAC还没有收到票证
或者可以使用noPac C#工具检索网络上所有可用域控制器的TGT票证，该工具基于Rubeus，因为它使用库Rubeus.lib.Interop.LUID来获取票证，票证大小可以确定KDC是否在没有PAC的情况下签发了票证
如果从PowerShell控制台执行操作，Shitsecure开发了一个PowerShell脚本Invoke-noPac，它将.NET 程序集noPac嵌入到base64中，由于该工具实际上是noPac，因此可以使用相同的参数来检索票证
手动检索
有各种工具和脚本可以自动化来自域和非域加入系统的技术，然而在深入自动化之前，重要的是要了解如何使用现有的工具集手动执行这种攻击，在活动目录中创建机器帐户对于红队操作来说并不新鲜，因为它也可以在基于资源的约束委派期间使用，Kevin Robertson开发了一个名为Powermad的 PowerShell模块，该模块具有可以在域上创建机器帐户的功能
使用PowerSploit的Set-DomainObject从已创建的机器帐户中删除服务主体名称值是微不足道的
通过执行以下命令也可以从Powermad和SetMachineAccountAttribute 函数中修改sAMAccountName属性值以指向域控制器主机名：
查看活动目录中的属性，可以看出新机器帐户的值现在指向dc，因此该帐户可以模拟域控制器
可以通过查询域控制器来验证sAMAccountName属性是否被修改，PowerSploit中的GetDomainComputer函数可以枚举域中机器帐户的属性
对于涉及Kerberos的操作，Rubeus是标准工具，由于sam帐户名称已更改，因此可以从标准用户的上下文中为dc帐户请求票证授予票证
sam帐户名称属性需要恢复到其原始值或任何其他值，否则将不会发出服务票证
由于TGT已存储在内存中，因此可以使用S4U2self kerberos扩展代表域管理员请求服务票证，由于原始票据属于dc用户，但由于sam帐户名称已被重命名，因此Kerberos将查找dc$，它是一个有效的机器帐户，并将为所请求的服务签发票据
可以从现有会话中执行Mimikatz，以便使用DCSync技术转储krbtgt帐户的哈希，以创建黄金票
自动化实现
可以使用由Cube0x0开发的C#工具noPac直接从内存中自动复制 sAMAccountName欺骗的步骤，执行以下命令将创建一个具有指定密码的机器帐户，并获得cifs服务的服务票证，该票证将被传递到内存中
以下命令将验证域升级，因为标准用户可以枚举域控制器上C$文件夹的内容
同样如果初始植入是基于PowerShell的，则可以从Invoke-noPac脚本中使用相同的命令行参数，正如上面已经提到的它实际上是noPac C#工具的包装器
访问域控制器的C$文件夹将验证缓存到内存中的服务票证是否已提升
非域内主机
该技术的相同原理可以应用于未连接到域的系统，Hossam Hamed发布了一个名为sam the admin的python脚本来模拟攻击，最初脚本将尝试枚举属性ms-DS-MachineAccountQuota ，以确定是否可以在域中添加新计算机，然后将使用随机密码创建一个机器帐户，新计算机帐户的sAMAccountName 属性将被修改为包含域控制器计算机帐户的值，将请求提升票证并将其保存到缓存中，最后sAMAccountName的原始值”属性将被恢复，并使用缓存的票证，将使用Impacket套件中的smbexec建立与域控制器的会话
该脚本包含一个标志，可用于转储域哈希，因为在后台使用secretsdump
这些哈希可用于离线破解，以识别任何使用中的弱密码，并确定客户端的密码策略是否足够，是否符合行业标准或需要进一步评估，由于krbtgt帐户的哈希是可见的，因此可以为域持久性创建黄金票
Oliver Lyak发布了一个类似的python脚本，它既可以用于扫描域控制器以识别易受攻击的主机，也可以用于检索票证授予服务票证
对易受攻击的域控制器执行以下命令将创建一个具有随机密码的机器帐户，以获得票证授予票证，然后机器帐户名称将重命名并使用S4U2self为属于域管理员组的管理员用户检索并保存在本地的服务票证
可以使用export KRB5CCNAME和存储票证的路径将票证导入Kerberos缓存，由于票证现在是从当前控制台导入的，因此Impacket psexec可以与 Kerberos身份验证一起使用，以便访问域控制器
这种技术的实现也可以通过一个基于名为noPac的 Python 脚本sam the admin的工具来实现，扫描程序脚本将枚举ms-DS-MachineAccountQuota 属性并将从所有可用的域控制器获取票证授予票证，工单大小也将显示在控制台中，以便快速识别易受攻击的目标，在下面的示例中与发出带有PAC的票证的主机10.0.0.1相比，在没有PAC的情况下收到的两张票证相对较小
此脚本可以根据活动使用各种参数执行，指定域用户的凭据和域控制器的IP 地址将实施攻击，直到检索到提升的票证
附加-shell和-impersonate标志将在域控制器上建立会话
类似地- dump标志可用于从NTDS.DIT机密中检索域用户的哈希值，由于已经通过Kerberos票证实现了域管理员访问，因此获取krbtgt帐户的哈希将是建立域持久性的合乎逻辑的下一步
参考连接
https://exploit.ph/cve-2021-42287-cve-2021-42278-weaponisation.html
https://exploit.ph/more-samaccountname-impersonation.html
https://github.com/WazeHell/sam-the-admin
https://github.com/cube0x0/noPac
文章来源：七芒星实验室
版权申明：内容来源网络，版权归原创者所有。除非无法确认，都会标明作者及出处，如有侵权，烦请告知，我们会立即删除并致歉!
本账号发布、转载的文章中所涉及的技术、思路和工具仅供以安全为目的的学习交流使用，任何人不得将其用于非法用途及盈利等目的，否则后果自行承担！
Flex布局（语法篇）
flex布局
flex-direction：row
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;}
（项目排列）：
.box1{
display: flex;
width:100%;
flex-direction: row;
}
flex-direction：row-reverse
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px; }
（项目排列）：
.box2{
display: flex;
width:100%;
flex-direction: row-reverse;
}
flex-direction：column
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（项目排列）：
.box3{
display: flex;
width:100%;
flex-direction: column;
}
flex-direction：column-reverse
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（项目排列）：
.box4{
display: flex;
width:100%;
flex-direction: column-reverse;
}
flex-wrap：nowrap
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（不换行）：
.box5{
display: flex;
width:100%;
flex-wrap: nowrap;
}
flex-wrap：wrap
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（换行，第一行在上方）：
.box6{
display: flex;
width:100%;
flex-wrap: wrap;
}
flex-wrap：wrap-reverse
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5 ,.div6{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（换行，第一行在下方）：
.box7{
display: flex;
width:100%;
flex-wrap: wrap-reverse;
}
justify-content：flex-start
.div-box{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（对齐方式）：
.box8{
display: flex;
width:100%;
justify-content: flex-start;
}
justify-content：flex-end
.div-box{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（对齐方式）：
.box9{
display: flex;
width:100%;
justify-content: flex-end;
}
justify-content：center
.div-box{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（对齐方式）：
.box10{
display: flex;
width:100%;
justify-content: center;
}
justify-content：space-between
.div-box{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（对齐方式）：
.box11{
display: flex;
width:100%;
justify-content: space-between;
}
justify-content：space-around
.div-box{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
（对齐方式）：
.box12{
display: flex;
width:100%;
justify-content: space-around;
}
align-items：flex-start
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
.div2{
height: 300px;
}
.div4{
height: 50px;
}
（对齐方式）：
.box13{
display: flex;
width:100%;
align-items: flex-start;
}
align-items：flex-end
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
.div2{
height: 300px;
}
.div4{
height: 50px;
}
（对齐方式）：
.box14{
display: flex;
width:100%;
align-items: flex-end;
}
align-items：center
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
.div2{
height: 300px;
}
.div4{
height: 50px;
}
（对齐方式）：
.box15{
display: flex;
width:100%;
align-items: center;
}
align-items：baseline
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
background:#ecbebe;
height: 100px;
width: 100px;
margin:10px;
}
.div2{
height: 300px;
}
.div4{
height: 50px;
}
（对齐方式）：
.box16{
display: flex;
width:100%;
align-items: baseline;
}
align-items：stretch
#box17{
width: 300px;
height: 278px;
border: 1px solid black;
display:flex;
align-items:stretch;
}
#box17 div{
flex:1;
}
.div1{
background-color:#eadd79;
}
.div2{
background-color:#79e5ea;
}
.div3{
background-color:#79ea8c;
}
align-content：stretch
（11、22、33、44、55）：
.div1 ,.div2 ,.div3{
height:30px;
width:100px;
}
.div1{
background-color:#eadd79;
}
.div2{
background-color:#79e5ea;
}
.div3{
background-color:#79ea8c;
}
（对齐方式）：
.box18{
background-color:#ecbebe;
height:200px;
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:stretch;
}
align-content：center
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
height:30px;
width:100px;
}
.div1{
background-color:#eadd79;
}
.div2{
background-color:#79e5ea;
}
.div3{
background-color:#79ea8c;
}
.div4{
background-color:#9ad1b2;
}
.div5{
background-color:rgb(10,154,101);
}
（对齐方式）：
.box19{
background-color:#ecbebe;
height:200px;
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:center;
}
align-content：flex-start
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
height:30px;
width:100px;
}
.div1{
background-color:#eadd79;
}
.div2{
background-color:#79e5ea;
}
.div3{
background-color:#79ea8c;
}
.div4{
background-color:#9ad1b2;
}
.div5{
background-color:rgb(10,154,101);
}
（对齐方式）：
.box20{
background-color:#ecbebe;
height:200px;
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:flex-start;
}
align-content：flex-end
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
height:30px;
width:100px;
}
.div1{
background-color:#eadd79;
}
.div2{
background-color:#79e5ea;
}
.div3{
background-color:#79ea8c;
}
.div4{
background-color:#9ad1b2;
}
.div5{
background-color:rgb(10,154,101);
}
（对齐方式）：
.box21{
background-color:#ecbebe;
height:200px;
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:flex-end;
}
align-content：space-between
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
height:30px;
width:100px;
}
.div1{
background-color:#eadd79;
}
.div2{
background-color:#79e5ea;
}
.div3{
background-color:#79ea8c;
}
.div4{
background-color:#9ad1b2;
}
.div5{
background-color:rgb(10,154,101);
}
（对齐方式）：
.box22{
background-color:#ecbebe;
height:200px;
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:space-between;
}
align-content：space-around
（11、22、33、44、55）：
.div1 ,.div2 ,.div3 ,.div4 ,.div5{
height:30px;
width:100px;
}
.div1{
background-color:#eadd79;
}
.div2{
background-color:#79e5ea;
}
.div3{
background-color:#79ea8c;
}
.div4{
background-color:#9ad1b2;
}
.div5{
background-color:rgb(10,154,101);
}
（对齐方式）：
.box23{
background-color:#ecbebe;
height:200px;
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:space-around;
}
flex-flow：column wrap
.box24 {
display: flex;
}
.flex-container.first {
display: flex;
background: #333;
width: 200px;
height: 200px;
margin: 5px;
flex-flow: column wrap;
}
.item {
background: #ecbebe;
padding: 5px;
width: 80px;
height: 80px;
margin: 5px;
line-height: 80px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
ul {
padding: 0;
}
li {
list-style: none;
}
flex-flow：row-reverse wrap-reverse
.box25 {
display: flex;
}
.flex-container.second {
display: flex;
background: #333;
width: 200px;
height: 200px;
margin: 5px;
flex-flow: row-reverse wrap-reverse;
}
.item {
background: #ecbebe;
padding: 5px;
width: 80px;
height: 80px;
margin: 5px;
line-height: 80px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
ul {
padding: 0;
}
li {
list-style: none;
}
flex-grow
#box26 {
width: 700px;
height: 200px;
border: 1px;
display: flex;
}
.blue1 {
background-color:#2ce0e8;
flex-grow: 2;
}
.green1 {
background-color:#00ff66;
flex-grow: 3;
}
.yellow1 {
background-color:#e3fd0e;
flex-grow: 0.5;
}
.pink1 {
background-color:#ecbebe;
flex-grow: 1;
}
.grey1 {
background-color:#cec5c5;
flex-grow: 1;
}
order: <integer>
#box27 {
width: 400px;
height: 150px;
border: 1px;
display: flex;
}
#box27 div {
width: 100px;
height: 100px;
}
.yellow {
background-color:#e3fd0e;
order: -2;
}
.blue {
background-color:#2ce0e8;
order: 5;
}
.green {
background-color:#00ff66;
order: 10;
}
.pink {
background-color:#ecbebe;
order: 0;
}
flex-shrink:<number>
#box28 {
display: flex;
width: 500px;
}
#box28 div {
flex-basis: 140px;
border: 1px solid rgba(0,0,0,.1);
}
.boxt{
flex-shrink: 0;
}
.boxt1 {
flex-shrink: 1;
}
flex-basis:<length> | auto
#box29 {
width: 350px;
height: 100px;
border: 1px;
display: flex;
}
.one {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
}
.two {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 150px;
}
.three{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
flex:1
#box30 div{
flex:1;
}
flex:auto
#box30 div{
flex:auto;
}
flex:none
#box30 div{
flex:none;
}
align-self:auto | flex-start | flex-end | center | baseline | stretch
#box31 {
width: 1000px;
height: 400px;
border: 1px solid rgba(0,0,0,.2);
display: flex;
align-items: flex-start;
}
.Red {
background-color:#f32929;
width: 300px;
height: 100px;
flex: 1;
align-self: flex-start;
}
.Pink {
background-color:#ecbebe;
width: 300px;
height: 100px;
flex: 1;
}
.Blue {
background-color:#2ce0e8;
width: 300px;
height: 100px;
flex: 1;
align-self: center;
}
.Green{
background-color:#00ff66;
width: 300px;
height: 100px;
flex: 1;
}
.Yellow{
background-color:#e3fd0e;
width: 300px;
height: 100px;
flex: 1;
align-self: flex-end;
}
.Grey{
background-color:#cec5c5;
width: 300px;
height: 100px;
flex: 1;
align-self: baseline;
}
.Black{
background-color:#5f4e4e;
flex: 1;
align-self: stretch;
}
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
