CSS - flex 属性

描述

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.

应用于

所有 HTML 元素。

DOM 语法

flex: any integer value;

以下示例演示了此属性的效果：

Open Compiler

<html>
<head>
<style>
   .my_flex {
      display: flex;
      align-items: stretch;
      background-color: #0ca14a;
   }
   .my_flex div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my_flex">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div style="flex: 0 0 150px">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div style="flex: 0 0 250px">Flex item 7</div>
      <div>Flex item 8</div>
   </div>
</body>

打印页面