如何使用CSS设置特定弹性项目的大小？

在CSS中，我们可以使用CSS提供的某些弹性属性创建我们自己的弹性盒。CSS弹性盒用于为移动设备和其他小屏幕设备创建响应式布局，通过调整这些屏幕尺寸的布局来排列布局。为了创建网页的弹性盒来管理项目及其大小，我们可以使用display: flex;属性，然后我们可以使用与此属性相关的弹性属性根据设备宽度来排列项目。

现在让我们讨论并理解display flex及其所有相关属性，以管理网页上的项目。

以下是可与flex属性一起使用的属性，用于创建弹性盒，排列弹性项目并设置其大小：

  • order − 此属性可用于将弹性项目从其默认顺序设置为您想要显示的顺序。

语法

order: numeric_value; // It takes numeric value to set the order.

  • flex-grow − flex-grow属性可用于设置弹性项目相对于其他项目可以增长的额外正空间。

语法

flex-grow: numeric_value;

  • flex-shrink − flex-shrink是一个属性，可用于设置弹性项目相对于其他项目可以减小其宽度或缩小自身的负空间。

语法

flex-shrink: numeric_value;

  • flex-basis − 此属性用于为任何项目初始设置弹性项目宽度。

语法

flex-basis: numeric_value; // Takes numeric value in pixels to set initial width of the flex item.

  • flex − flex属性是一个简写属性，用于使用上述三个属性，例如flex-grow、flex-shrink和flex-basis。您可以为此属性的每个属性使用三个不同的值。第一个值将代表flex-grow，第二个值将代表flex-shrink，第三个值将代表flex-basis属性值。

语法

flex: value value value;

现在让我们通过实际实现代码示例来详细了解上述属性。

在第一个代码示例中，我们将了解order属性的使用，以更改弹性项目的顺序。

步骤

  • 步骤1 − 在第一步中，我们将定义一个父元素，该元素持有display flex属性及其关联的类。

  • 步骤2 − 在此步骤中，我们将定义内部子元素，其顺序将使用CSS中的order属性更改。

  • 步骤3 − 在最后一步中，我们将使用它们的类获取所有这些元素并更改它们的顺序。

示例

以下示例将解释order属性的使用，并按照您希望它们出现的顺序排列弹性项目：

Open Compiler
<!DOCTYPE html>
<html lang = "en">
<head>
   <style>
      .main-container {
         display: flex;
         border: 2px solid red;
         flex-wrap: wrap;
         justify-content: center;
      }
      .inner-div {
         border: 1px solid green;
         padding: 5px;
         margin: 2px;
         width: 16%;
      }
      .inner-div1 {
         order: 3;
      }
      .inner-div2 {
         order: 5;
      }
      .inner-div3 {
         order: 2;
      }
      .inner-div4 {
         order: 1;
      }
      .inner-div5 {
         order: 4;
      }
   </style>
</head>
<body>
   <center>
      <h2>Setting the size of specific flex-item using CSS</h2>
      <p>The flexible div elements of the below flexbox container are ordered using the order property of CSS.</p>
      <div class = "main-container">
         <div class = "inner-div inner-div1"> This is the 1st flexible div element set to 3rd position using the order property. </div>
         <div class = "inner-div inner-div2"> This is the 2nd flexible div element set to 5th position using the order property. </div>
         <div class = "inner-div inner-div3"> This is the 3rd flexible div element set to 2nd position using the order property. </div>
         <div class = "inner-div inner-div4"> This is the 4th flexible div element set to 1st position using the order property. </div>
         <div class = "inner-div inner-div5"> This is the 5th flexible div element set to 4th position using the order property. </div>
      </div>
   </center>
</body>
</html>

在此代码示例中，我们使用了order属性来设置弹性项目的不同顺序，这些弹性项目通常将按此顺序出现。我们设置了所有项目的顺序，这与它们的默认顺序不同。

让我们讨论另一个代码示例，在这个示例中，我们将看到简写flex属性以及其他三个属性flex-grow、flex-shrink和flex-basis的使用。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

方法

上述示例和此示例的方法几乎相同。您只需要添加一个具有子元素的父div，并在这些元素的子元素上使用flex属性和其他三个属性。

示例

以下示例将帮助您了解上述算法中的更改以及单独使用三个属性和简写属性：

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .main-container {
         display: flex;
         border: 2px solid red;
         flex-wrap: wrap;
         justify-content: center;
      }
      .inner-div {
         border: 1px solid green;
         padding: 5px;
         margin: 2px;
         width: 16%;
      }
      .inner-div11 {
         flex-grow: 2;
      }
      .inner-div12 {
         flex-shrink: 1;
      }
      .inner-div13 {
         flex-basis: 250px;
      }
      .inner-div21 {
         flex: 2 5 200px;
      }
      .inner-div22 {
         flex: 5 3 300px;
      }
      .inner-div23 {
         flex: 3 3 150px;
      }
   </style>
</head>
<body>
   <center>
      <h2>Setting the size of specific flex-item using CSS</h2>
      <p>The below flex items arranged using the flex-grow, flex-shrink and flex-basis property individually.</p>
      <div class = "main-container">
         <div class = "inner-div inner-div11"> This flex item uses the flex grow property to grow itself relative to other elements. </div>
         <div class = "inner-div inner-div12"> This flex item uses the flex shrink property to shrink itself relative to other elements. </div>
         <div class = "inner-div inner-div13"> This flex item uses the flex basis property to set its initial width. </div>
      </div>
      <p>The below flex items arranged using the flex property.</p>
      <div class = "main-container">
         <div class = "inner-div inner-div21"> This flex item contains the flex property with flex: 2 5 200px; these values. </div>
         <div class = "inner-div inner-div22"> This flex item contains the flex property with flex: 5 3 300px; these values. </div>
         <div class = "inner-div inner-div23"> This flex item contains the flex property with flex: 3 3 150px; these values. </div>
      </div>
   </center>
</body>
</html>

在上述示例中，我们使用了弹性盒的不同CSS属性来为不同的屏幕设备排列弹性项目。我们单独使用flex-grow、flex-shrink和flex-basis属性以及第一个div的子元素。同时，我们使用flex属性来排列第二个div元素的子元素。

结论

在本文中，我们学习了如何在不同的屏幕设备上设置不同弹性项目的大小。我们讨论了实现此任务的不同CSS弹性属性，并借助每个属性的代码示例来理解它们。在第一个代码示例中，我们了解了order属性的使用。而在第二个示例中，我们详细讨论了四个不同的CSS属性。

更新于：2023年11月20日

123 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告