align-self属性(CSS设置FlexibleBoxLayout模块的子属性)

发布时间：2021-05-26 18:10 所属分类：热门主题浏览次数：

　　align-self属性

　　cssalign-self属性

　　align-self属性是FlexibleBoxLayout模块的子属性。

　　作用：定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

　　注意：align-self属性可重写灵活容器的align-items属性。

　　语法

　　属性值：

　　auto：默认值。元素继承了它的父容器的align-items属性。如果没有父容器则为"stretch"。

　　CSS设置FlexibleBoxLayout模块的子属性

　　灵活布局的定义能够改变其项目的宽度和/或高度，以最适应任何显示设备上的任何可用空间。灵活的容器扩展项目以填充可用空间，或减少它们以防止溢出。

　　块布局是垂直偏差;内联布局是水平偏置的。Flexbox布局允许。虽然块布局对于页面非常好，但应用程序组件将改变当用户代理的变化时的方向，手机翻转方向，调节尺寸，伸展或从垂直方向上缩小到水平方向，等等。这不方便。Flexbox布局良好的小规模布局，（新兴）网格布局适用于更大的布局。两者都是CSS工作组的一部分，以提供更好的互操作性，不同的写作模式以及具有不同用户代理的Web应用程序的其他需求。

　　灵活的盒子词汇

　　灵活的盒子不使用水平（内联）和垂直（块），但使用主轴和交叉点。如果弯曲方向是列，它将垂直是一个主轴，水平将是水平轴。考虑以下图表。它显示了柔性容器弯曲方向的行，这意味着柔性元件在主轴上彼此跟踪。

　　使用flexbox|CSS灵活盒@@JinFlexibleBoxes

　　Flex容器包含Flex项目的父元素。灵活的容器使用Flex或Inline-FlexDisplayProperty.flex项目中描述的值

　　弹性容器的每个孩子都是Flex项目。Flex容器中直接包含的文本包装在匿名Flex项目中。

　　轴

　　每个柔性箱布局都遵循两个轴。主轴是弹性术语，然后是彼此。横轴是垂直于主轴的轴。

　　柔性方向属性会产生主轴。

　　justify-content属性定义了如何在当前行的主轴上放置。

　　对齐项属性定义了沿当前行上的交叉轴排列Flex项目的默认方法。

　　这是Lign-self属性定义单个弹性项目如何在水平轴上对齐，并覆盖默认设置的默认项目对齐项。

　　方向

　　柔性容器的主启动/主结束和跨开始/跨端描述了灵活物品流的起点和结束。它们遵循通过写入模式建立的柔性容器的柔性容器的主轴和横向（从左到右，从右到左等）。

　　订单属性将元素分配给序列号，并确定首次出现的元素。

　　Flex-Flow功能缩短了弯曲方向和柔性包装

　　线

　　根据Flex-Wrap属性，此属性控制交叉轴的方向和新行的堆叠方向。

　　尺寸

　　弹性物品的未知高度和宽度是主尺寸和横向尺寸，它们分别沿着柔性容器的主轴和水平轴线。

　　最小高度和最小宽度特征的初始值为0。

　　Flex属性简化了Flex-Grow，Flex-Shrink和Flex-BasitPersion的灵活性，以建立灵活的项目。

　　指定一个灵活的框

　　要使用此样式来指定元素的CSS，请设置显示属性，如下所示：

　　显示：Flex;

　　或者

　　显示：内联-弯曲;

　　这使得元件成为弹性容器，并将其子元素定义为弹性项目。此Flex值使Flex容器成为块级元素。内联柔性值使得Flex容器成为原子级元素。

　　注意：使用旧浏览器的前缀标记时，将前缀添加到Display属性，而不是Display属性本身。例如，显示：-webkit-flex。

　　Flex项目考虑因素

　　Flex容器中直接包含的文本将自动打包在匿名Flex项目中。但是，仅呈现仅包含空格的匿名Flex项目，就像指定显示：无。

　　柔性容器肯定定位成使得它们的静态位置在其柔性容器中确定主开始内容框的角落。

　　相邻的弹性物品的边缘不会折叠。使用自动边距以在垂直或水平方向上吸收额外的空间，可用于对齐或分离相邻的柔性物品。有关更多详细信息，请参阅W3CCSS灵活框布局模块规范中的“自动”边缘对齐。

　　与其他CSS中的库存方法不同，Flexbox的对齐属性是“真实”的。这意味着即使它们溢出Flex容器，Flex项目也将保持到位。但是，如果它们溢出页面的顶部边缘或左??边（LTR语言，如英语;问题出现在RTL语言的右边缘，如阿拉伯语），有时是问题，因为你无法滚动到那个地方，甚至那里有内容！在未来的版本中，对齐将扩展到具有“安全”选项。现在，如果这是一个问题，您可以使用利润来实现中心，因为如果溢出停止，它们会以“安全性”方式响应。而不是使用aligh-property，只需将自动边距放在您想要击中的弹性项目上。而不是合理的属性，将自动边缘放在柔性容器中的第一个Flex项目的外边缘上。自动边缘将“弯曲”并呈现剩余空间，并且当存在任何剩余空间时，弯曲项目将居中，并且在没有剩余空间时切换到正常对齐。但是，如果您尝试证明-内容替换基于边缘的离心机在多线柔性盒中，可能不是很好，因为您需要将余量放在每行的第一个和最后一个灵活项目上。除非您可以预测哪些项目将在哪些项目结束时，除非您无法在主轴上可靠地替换主轴上的正常内容属性。

　　回想一下，尽管元素的顺序与源代码中的顺序无关，但这种独立性仅影响视觉渲染，留下源顺序语音序列和导航。甚至订单属性也不会影响语音或导航顺序。因此，开发人员必须注意正确地安排源代码中的元素，以避免损坏文档的可访问性。

　　灵活的盒子物业

　　属性不会影响灵活框

　　由于灵活框使用不同的布局算法，因此有一个Flex容器某些属性毫无意义：

　　列-*属性的多列模块对弹性物品没有影响。

　　清除对弹性物品没有影响。

　　浮动计算显示元素的属性以阻止。

　　垂直对齐对弹性物品的对齐没有影响。