CSS 如何将容器中的项目调整到flex-end的位置

在css中，使用CSS将容器中的项目调整到flex-end，是为了将项目定位在容器主轴的末端。这样就可以更精确地控制容器内的项目布局，例如将项目对准标题的底部或导航栏的右侧。此外，将项目对准柔性端，可以通过创造一个干净和有组织的布局，改善网站或应用程序的整体视觉设计和用户体验。

方法

我们有三种不同的方法来对齐容器的项目基线，包括 —

使用 “align-items:flex-end”
使用 “justify-content:flex-end”

让我们详细看看这些步骤中的每一个。

方法1：使用 “align-items:flex-end”

将容器中的项目对齐到flex-end的第一个方法是CSS Flexbox中的 “align-items:flex-end “属性，用于将flex容器中的项目沿垂直（十字）轴对齐。当 “align-items “属性被设置为 “flex-end “时，容器中的项目将被对齐到容器的底部。这对于创建垂直布局是很有用的，在这种布局中，项目应该被对齐到容器的底部，而不是顶部。

例子

在这里，我们将通过一个逐步的例子来实现这种方法 −

第1步 --” #container “使用CSS选择器选择id为 “container “的元素，” display: flex; “将所选元素的显示属性设为 “flex”。这告诉浏览器将该元素视为一个柔性容器，并将其子元素以柔性布局的方式布局。

#container {
   display: flex;

第2步 - 在style.css文件中，使用 align-items:flex-end 属性被设置在#container元素上。这告诉浏览器将#container元素的子元素沿垂直轴对齐，子元素的底边接触到#container元素的底边

display: flex;
   align-items: flex-end;

第3步 --在容器内，有3个类别为 “item “的

div>元素，作为包含子元素的弹性项目。

<div id="container">
   <div class="item">Item 1</div>
   <div class="item">Item 2</div>
   <div class="item">Item 3</div>
</div>

第4步 - 最后的代码看起来像这样。

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Align-items: flex-end</title>
   <style>
      #container {
         width: 420px;
         height: 150px;
         border: 1px solid black;
         display: flex;
         align-items: flex-end;
         font-size: 30px;
      }
      .item {
         padding: 10px;
         color: blue;
         margin-right: 20px;
      }
   </style>
</head>
<body>
   <div id="container">
      <div class="item">tutorials</div>
      <div class="item">point</div>
      <div class="item">articles</div>
   </div>
</body>
</html>

方法2：使用 “justify-content:flex-end”

第一种方法是将容器中的项目对齐到flex-end，CSS Flexbox中的 “justify-content:flexend “属性用于沿主轴对齐flex项目，主轴默认是水平的（大多数情况下是从左到右）。因此，当设置为flex-end时，它将把柔性项目对齐到主轴的末端，也就是容器的右侧。

例子

在这里，我们将通过一个逐步的例子来实现这种方法 −

第1步 --” #container “使用CSS选择器选择id为 “container “的元素，” display: flex; “将所选元素的显示属性设置为 “flex”。这告诉浏览器将该元素视为一个柔性容器，并将其子元素以柔性布局的方式布局。

#container {
   display: flex;

第2步 - 在style.css文件中，使用 justify-content:flex-end 属性正在#container元素上设置。这告诉浏览器 “justify-content “属性被设置为 “flex-end”，这将使柔性项目沿主轴（水平轴）对齐到容器的末端。

display: flex;
   justify-content: flex-end;

第3步 --在容器内，有3个类别为 “item “的

div>元素，作为包含子元素的弹性项目。

<div id="container">
   <div class="item">Item 1</div>
   <div class="item">Item 2</div>
   <div class="item">Item 3</div>
</div>

第4步 - 最后的代码看起来像这样 —

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Justify-content: flex-end</title>
   <style>
      #container {
         width: 420px;
         height: 150px;
         border: 1px solid black;
         display: flex;
         justify-content: flex-end;
         font-size: 30px;
      }
      .item {
         padding: 10px;
         color: blue;
         margin-right: 20px;
      }
   </style>
</head>
<body>
   <div id="container">
      <div class="item">tutorials</div>
      <div class="item">point</div>
      <div class="item">articles</div>
   </div>
</body>
</html>

总结

在这篇文章中，我们研究了如何使用CSS中的 “align-items:flex-end “属性和 “justify-content:flex-end “属性将一个项目对齐到容器的flex-end处。align-items:flex-end和justify-content:flex-end都是将柔性项目对齐到容器的末端，但它们沿不同的轴对齐。 align-items沿交叉轴（通常是垂直轴）对齐项目，而justify-content沿主轴（通常是水平轴）对齐项目。