Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

flex：1 代表什么【热度: 400】 #787

Open
yanlele opened this issue Jul 12, 2024 · 0 comments
Open

flex：1 代表什么【热度: 400】 #787

yanlele opened this issue Jul 12, 2024 · 0 comments
Labels
CSS CSS 相关问题 百度 公司标签
Milestone
中

Comments

@yanlele
Copy link
Member

yanlele commented Jul 12, 2024

关键词：flex 布局相关属性问题

在 CSS 的弹性盒模型（Flexbox）中，flex: 1表示子项（flex 子项）的伸缩性。

具体来说，flex: 1是flex-grow、flex-shrink和flex-basis三个属性的简写。其默认值等同于flex: 1 1 0%，分别代表以下含义：

  • flex-grow: 1：定义项目的放大比例为 1。这意味着当弹性容器有剩余空间时，该子项将按照比例伸展以填充剩余空间。如果存在多个flex-grow: 1的子项，它们将等分剩余空间。
  • flex-shrink: 1：定义项目的缩小比例为 1。即如果空间不足，该项目将缩小。
  • flex-basis: 0%：在分配多余空间之前，计算项目是否有多余空间，这里的0%表示不考虑项目本身的大小。

flex: 1经常用于自适应布局。例如，将父容器的display设置为flex，侧边栏大小固定后，将内容区设置为flex: 1，内容区则会自动放大占满剩余空间。

以下是一个简单的示例代码，展示了flex: 1的效果：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        width: 300px;
        height: 200px;
        background-color: lightblue;
      }

      .item1 {
        background-color: lightcoral;
        flex: 1;
      }

      .item2 {
        background-color: lightgreen;
        flex: 1;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="item1">item1</div>
      <div class="item2">item2</div>
    </div>
  </body>
</html>

在上述代码中，.container是一个 flex 容器，它包含两个子元素.item1和.item2，并且都将flex属性设置为1。当调整.container的宽度时，.item1和.item2会等比例地增大或缩小，以占满剩余空间。
@yanlele yanlele added CSS CSS 相关问题 百度 公司标签 labels Jul 12, 2024
@yanlele yanlele added this to the 中 milestone Jul 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS CSS 相关问题 百度 公司标签
Projects
None yet
Milestone
中
Development

No branches or pull requests
1 participant
@yanlele