Flex布局及Flex: 1采用flex布局的元素称为flex容器，它的所有子元素自动成为容器成员，称为flex ite

采用flex布局的元素称为flex容器，它的所有子元素自动成为容器成员，称为flex item(项目) main size表示为主轴空间

容器上有6个属性

flex-direction决定 item 的排列方向默认从左向右
flex-wrap 决定 item 如何换行默认不换行自动调整itm大小
flex-flow 1,2的结合的简写形式
justify-content 定义了main axis 上的对齐方式，默认左对齐
align-items 定义项目在cross axis 上如何对齐，
align-content 定义了多个 axis的排列方式

项目上有6个属性

order 按给对应项目赋值的order大小顺序从小到大排序可以将 order 应用于任何直接的 Flex 子元素：

	<div class="container">
  <div class="item" style="order: 2;">Item 1</div>
  <div class="item" style="order: 1;">Item 2</div>
  <div class="item" style="order: 3;">Item 3</div>
</div>

flex-grow 定义项目的放大比例，默认为0，定为1的话就是所有项目等分空间，一个为2另一个为1就是前者占的空间比后者大两倍
flex-shirnk 定义项目缩小比例，默认为1，当空间不足时，都等比缩小为0的话则是一个项目不缩小
flex-basis 分配多余空间之前，该项目占据的主轴空间
flex grow，shirnk，basis 的简写
align-self 允许某个项目与其他项目不一样的对齐方式

Flex: 1 代表什么？

简言之就是容器中的项目都等比的放大或缩小

flex: 1 是 Flexbox 布局中常用的一个简写属性，它表示子元素如何在容器内分配可用空间。具体来说，flex: 1 是 flex-grow, flex-shrink 和 flex-basis 的简写，等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;。

解释各个属性：

flex-grow: 控制子元素如何占据父容器中剩余的空间。flex-grow: 1 表示元素会根据剩余空间进行放大，占据更多空间。多个元素的 flex-grow 值不同，会按比例分配空间。
flex-shrink: 控制当父容器空间不足时，子元素如何收缩。flex-shrink: 1 表示元素在空间不足时会收缩以适应容器大小。多个元素的 flex-shrink 值不同，空间不足时会按比例收缩。
flex-basis: 定义了元素的初始大小。flex-basis: 0% 表示元素的初始宽度为 0，但通过 flex-grow 可以根据容器的剩余空间进行扩展。

使用示例


<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

.container {
  display: flex;
}
.box {
  flex: 1;
}

解释：

• 这里每个 .box 元素的 flex: 1 意味着它们将均匀分配容器的剩余空间。

• 因为每个 .box 的 flex-grow 值相同，所以它们会平分空间，形成等宽的三栏布局。

常见用法

• 等分布局：使用 flex: 1 的子元素会平分父容器的空间，适合创建等宽的多列布局。

• 响应式布局：在需要自适应的布局中，flex: 1 可以让元素动态调整大小，适应屏幕宽度变化。

总结

flex: 1 是一个简便的方法，用于在父容器中让子元素自动占满空间。它在创建自适应和等分布局中非常常用，也是 Flexbox 布局中的一个强大功能。

例题：两栏布局，左边200px, 右边自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
        }

        .left {
            width: 200px;
            background-color: red;
        }

        .right {
            display: 1;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">左边的固定200px</div>
        <div class="right">右侧自适应</div>
    </div>

</body>

</html>

想让某个元素单独占一行怎么办？

flex布局默认不换行，元素都是挤在一行上的，因此先要设置换行

.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

.child {
  flex: 1; /* 默认占用剩余空间 */
}

.child.full-width {
  flex-basis: 100%; /* 独占一行 */
}