CSS定位和Flexbox的工作方式-举例说明

作者:尼桑·库玛(Nishant Kumar)

CSS位置属性

您可以根据需要使用CSS position属性在CSS中定位元素,div和容器。position属性的优点在于,您可以使用它在所需的任何位置排列应用程序的元素,并且易于学习和实现。

CSS中有五种定位类型:

  1. 静态定位
  2. 相对定位
  3. 绝对定位
  4. 固定位置
  5. 粘性定位

让我们一一了解它们。

CSS中的静态定位

静态定位是CSS中使用的默认定位属性。它总是按照页面的正常流程进行。无论文档中先出现什么元素,都将首先显示。

CSS定位和Flexbox的工作方式-举例说明
输出

代码如下所示:

/* Static Positioning */
.parent {
    padding: 5px;
    position: static;
    background-color: #00AAFF;
    width: 40%;
  }

  .child-one {
  	position: static;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
  	position: static;
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
  	position: static;
    background-color: rgb(255, 116, 232);
  }
CSS中的静态定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Position and Flexbox</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="parent">Parent
        <div class="child-one">One</div>
        <div class="child-two">Two</div>
        <div class="child-three">Three</div>
    </div>
</body>
</html>

在上面的示例中,我们有父级,然后是子级1,然后是子级2,最后是子级3。它们均根据静态定位(即页面的正常流程)进行排列。

CSS中的相对位置

相对定位的工作原理与静态定位完全相同,但是有一个陷阱。

在相对定位中,我们可以做四件事,而在静态中我们不能做:我们可以将元素移到左,右,下和上。

让我们通过一个例子来理解我的意思。

/* Relative Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
  }

  .child-one {
    position: relative;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }
相对定位
CSS定位和Flexbox的工作方式-举例说明

如果运行我们的应用程序,我们将看到输出没有差异。换句话说,静态位置和相对位置是相同的,除非我们将上,下,左和右与相对一起使用。

让我们尝试使用上,下,左和右。

/* Relative Positioning with Top, Bottom, Left and Right */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
  }

  .child-one {
    position: relative;
    top: 10px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }

我们在子项1中将TopRelative一起使用

这样会将子级1移出文档流,它将从顶部移至底部10像素。

CSS定位和Flexbox的工作方式-举例说明
相对定位

您可以看到它涵盖了两个孩子的元素。根据属性,如果您使用向左,向右或向下,这将是相似的。

为什么主要原因儿童一个被覆盖子二孩子,一个是正常的文档流的不再是一部分,但孩子二孩子三是。

CSS中的绝对位置

定位元素的另一种方法是绝对定位。这种定位将元素从文档流中完全删除。所有其他元素将忽略具有绝对属性的元素

如果我们将Top,Bottom,Left或Right与Absolute一起使用,它将根据父容器排列元素,条件是父容器也必须绝对放置。

/* Absolute Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: static;
  }

  .child-one {
    position: absolute;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }
CSS定位和Flexbox的工作方式-举例说明

在这里,如果我们将Top设置为0px,则子级1在文档的常规流程之外

那是因为孩子一个是绝对的,而父母是静态的。

但是,如果我们将父级设置为绝对且顶部为0px,该怎么办?

/* Absolute Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: absolute;
    top: 0px;
  }

  .child-one {
    position: absolute;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }
CSS定位和Flexbox的工作方式-举例说明

在这里,您可以看到第一个孩子与父元素重叠,并且它们都位于顶部,且像素为0px。

第三种用例是,我们可以将Parent设置为相对,而将第一个孩子设置为绝对。

/* Absolute Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: relative;
    top: 0px;
  }

  .child-one {
    position: absolute;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }
CSS定位和Flexbox的工作方式-举例说明

当我们使用绝对值相对时,这是最有用的用例。现在,您可以看到我们的子对象是相对于父元素而不是整个文档的。

用简单的话来说,如果将父级固定为亲代,将子级固定为绝对,则子级将跟随父级作为其容器。

在CSS中的固定位置

还记得绝对的相对位置吗?有一个位置会完全忽略父元素,这是固定位置。

固定位置是根据整个HTML文档固定的。即使将其设置为相对父对象,它也不会跟随任何其他父对象。

另一件事是,如果我们将某些内容设置为固定值,则即使我们滚动它也将停留在相同的位置。

固定定位主要用于浮动项目和按钮。

/* Fixed Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: relative;
    top: 0px;
    height: 1000px;
  }

  .child-one {
    position: fixed;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }
CSS定位和Flexbox的工作方式-举例说明

您可以看到,即使将父元素设置为相对元素,第一个元素也完全不在其父元素的范围内。

如果我们滚动,其余的子项将根据文档流动,但固定项将保持不变。

CSS中的粘性定位

粘性位置是相对位置和固定位置的组合。

/* Sticky Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: relative;
    top: 0px;
    height: 1000px;
  }

  .child-one {
    position: sticky;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }
CSS定位和Flexbox的工作方式-举例说明

如果我们将孩子设置为粘性放置,它将看起来像亲戚一样正常。但是,一旦我们开始滚动,粘性子元素将停留在顶部。它将成为固定位置。

粘性位置主要用于创建导航栏。

现在我们已经摆脱了CSS的位置,让我们集中讨论Flexbox。

如何使用Flexbox

您可以使用CSS Flexbox属性来安排项目,而无需使用float。这使安排文档中的项目变得更加容易。您可以使用它来替换CSS中的网格。

如果没有Flexbox,我们的输出将随文档一起流动,即第一个孩子,然后第二个孩子,然后第三个孩子。

CSS定位和Flexbox的工作方式-举例说明

但是,如果我们希望它们水平并排放置,如下面的图片所示,该怎么办?

CSS定位和Flexbox的工作方式-举例说明

解决方案是Flexbox。我们需要将它们相对于行或列均匀地放置,在它们之间或周围留有空间。

首先,让我们创建一个包含三个孩子的父div。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Position and Flexbox</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="parent">
        <div class="child-one"></div>
        <div class="child-two"></div>
        <div class="child-three"></div>
    </div>
</body>
</html>

像这样的东西:

/* Flexbox container */
.parent {
    background-color: #00AAFF;
    width: 300px;
    height: 300px;
    display: flex;
  }

  .child-one {
    background-color: rgb(116, 255, 116);
    width: 300px;
    height: 300px;
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
    width: 300px;
    height: 300px;
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
    width: 300px;
    height: 300px;
  }

我们可以看到父级已被声明为flex。

CSS定位和Flexbox的工作方式-举例说明

在这里,我们有三个div框,每个都有不同的颜色。这是默认的Flexbox布置。

让我们看看Flexbox中不同类型的安排。

如何使用Flexbox排列元素

弯曲方向

此属性定义您的元素在屏幕上(垂直或水平)的显示方式。

用于水平排列项目。

CSS定位和Flexbox的工作方式-举例说明

如您所见,我们在水平行中进行了排列。

垂直排列项目,如下所示:

CSS定位和Flexbox的工作方式-举例说明

现在将正方形排列在垂直列中。

“行反向”的工作原理与行完全相同,但是元素的位置将被反转。第一个元素将是最后一个元素,最后一个元素将移到第一个元素。项目的排列将与flex-direction:row相反

CSS定位和Flexbox的工作方式-举例说明

反向列的工作原理与列完全相同,但是元素将被反向。第一个元素将是最后一个,最后一个元素将移到第一个。

CSS定位和Flexbox的工作方式-举例说明

证明内容合理

此属性以水平方式确定元素的对齐方式。

中心将元素设置为页面的水平中心。

CSS定位和Flexbox的工作方式-举例说明

Flex Start将元素放置在页面的开头。

CSS定位和Flexbox的工作方式-举例说明

Flex End将元素设置为页面的末尾。

CSS定位和Flexbox的工作方式-举例说明

周围空间使物品均匀排列,但它们之间留有间隔。弹性框容器内的所有元素之间的空间均应相等,但外部元素之间的空间将不相等。

CSS定位和Flexbox的工作方式-举例说明

在这里,一个孩子,两个孩子和三个孩子之间的空间相等,但不在外面。

“之间的空间”可最大化子元素之间的空间(这是“证明内容”属性)。

CSS定位和Flexbox的工作方式-举例说明

空格在子元素和FlexBox容器外部的空间之间平均分配相等的空间。

CSS定位和Flexbox的工作方式-举例说明

对齐项目

对齐项目用于在flex容器内垂直对齐项目。但这仅在高度固定的情况下有效。

中心将元素垂直设置到页面的中心。

CSS定位和Flexbox的工作方式-举例说明

Flex Start与“将内容对齐中心”相同,但是它垂直排列元素。在我们的例子中,元素将位于屏幕的左上角。

CSS定位和Flexbox的工作方式-举例说明

Flex End与Flex Start相同,但是它将使项目与屏幕的左下角对齐。

CSS定位和Flexbox的工作方式-举例说明

现在您知道了Flexbox的一些基础知识。

如何在屏幕中央对齐项目。

这些Flexbox属性也可以一起使用。例如,如果我们想将项目排列在最中央,则可以同时使用align-items:centerjustify-content:center。

点击阅读全文

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/4989.html

发表评论

登录后才能评论