布局

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: 在行与列之间创建空隙。

 

 

 

 

posted on 2024-02-02 11:23  黑逍逍  阅读(23)  评论(0)    收藏  举报