布局

container

使用响应式前缀来应用不同的样式类于不同的屏幕尺寸

不同的显示屏上显示不一样的布局

 

 

columns

columns: 4; 的样式，这将创建一个4列的布局。同理，columns-5 会创建5列

 

position

结合其他尺寸类（如 top-0, right-0, bottom-0, left-0）来精确控制元素的位置

1. static:

   • 默认值。没有定位，元素出现在正常的流中。

   • 

      

2. fixed:（固定）

   • 元素相对于浏览器窗口进行定位，即使窗口滚动也不会移动。
   • 例如：<div class="fixed top-0 right-0">...</div> 可以让元素固定在视口的右上角。

3. absolute:

   • 元素脱离正常的文档流，并相对于最近的已定位（非 static）祖先元素进行定位。
   • 例如：<div class="absolute bottom-0 left-0">...</div> 可以让元素定位在其最近的已定位父元素的左下角。

   • 

      

4. relative:

   • 元素首先放置在它在文档流中的正常位置，对子元素绝对定位时使用。

   • 

      

5. sticky:

   • 是一种混合定位方式，它基于用户的滚动位置相对于父容器的位置而变化。它在元素在视口内时表现为 relative 定位，在用户滚动到达某个阈值时变为 fixed。
   • 例如：<div class="sticky top-0">...</div> 可以让元素在滚动到视口顶部时“粘”在那里。

 

 参考【前端教程】我是flex，你真的懂我，了解我吗？_哔哩哔哩_bilibili

flex

 

定义：就是在一个div盒子里，将元素变成流动了。可以随意调整元素位置。属性是多个组合在一起使用

相关属性：

 

• flex:

  • flex：让div盒子变成flex流动

• Flex Basis: 控制flex元素的初始大小。

  • basis-0123456

 

 

• Flex Direction: 决定flex容器中子元素的排列方向。

  • 主轴（main axis），是容器的主要方向，如果将主轴变成竖直，那么项目沿着竖直排列，justify-content 则控制着竖直方向
  • flex-row:（默认）
  • flex-col：将竖直方向设置为主轴 

 

 

• Flex Wrap: 定义当子元素超出容器大小时是否换行。

  • flex-wrap：自动换行

 

 

• Flex Grow: 定义flex元素的放大比例。

• grow-0 ：默认，不放大

• grow

 

 

• Flex Shrink: 定义flex元素的缩小比例。

• shrink-0

• shrink：默认，不缩小

--------------------------------------------------------------------------------------------------------------------------------------------

 

• Justify Content：定义了子元素在主轴方向的对其方式

  • justify-center

• Align Items ：定义了子元素在主轴方向的对其方式

  • item-center

• Justify Self：单独控制一个元素在主轴方向的排列

  • justify-self-center

------------------------------------------------------------------------------------------------------------------------------------------------

• Justify Items：【控制网格项在网格容器的主轴方向上的对齐方式】

  • justify-items-center

• Align Content：【控制网格项在网格容器的交叉轴方向上的对齐方式】

  • content-center

• Align Self：单独控制某一个子元素在交叉轴的排列

  • self-center

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------

• Order: 改变元素在flex容器中的排列顺序。

Grid 相关属性：

• Grid Template Columns: 定义列的大小。
• Grid Column Start / End: 定义元素如何跨越列。一个元素占据多列
• Grid Template Rows: 定义行的大小。
• Grid Row Start / End: 定义元素如何跨越行。
• Grid Auto Flow: 控制自动布局算法的方向。

 

• Grid Auto Columns: 自动列轨道的大小。
• Grid Auto Rows: 自动行轨道的大小。

 

• Gap: 在行与列之间创建空隙。

 

 

 

 

 

ENG FRN