flex布局(三)

<div class="card-list">
    <div class="card">
        <h3>标题 1</h3>
        <p>内容比较短的文字。</p>
        <button>购买</button>
    </div>
    <div class="card">
        <h3>标题 2</h3>
        <p>内容非常非常长，占据了多行文字，这样会导致卡片被撑高。但是在 Flex 布局下，旁边的卡片高度也会跟着变高。</p>
        <button>购买</button>
    </div>
    <div class="card">
        <h3>标题 3</h3>
        <p>中等长度内容。</p>
        <button>购买</button>
    </div>
</div>

<style>
    .card-list {
        display: flex;
        flex-wrap: wrap;
        /* 允许换行 */
        gap: 20px;
        /* 现代浏览器推荐的间距写法，替代 margin */
    }

    .card {
        /* flex: 1 1 200px 的简写思路：
     允许放大(1)，允许缩小(1)，基础宽度 200px */
        flex: 1 1 200px;

        display: flex;
        flex-direction: column;
        /* 内部也转为 Flex，垂直排列 */

        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .card button {
        margin-top: auto;
        /* 关键！把按钮推到底部，实现等高对齐 */
        padding: 10px;
    }
</style>

<div class="card-list">
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">
    </div>
    <div class="card">

    </div>
    <div class="card">

    </div>
</div>

<style>
    .card-list {
        display: flex;
    }

    .card {
        /* flex: 1 1 200px 的简写思路：
     允许放大(1)，允许缩小(1)，基础宽度 200px */
        flex: 1 1 200px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
</style>

注释了padding

注释flex:1 1 200px 这里第三个200px是每个元素分配基础200px，第一个1是剩余空间平均分配，第二个1不用管，padding是在这个计算值后向内挖20px，注意这里宽度把内边距算在内

为什么最上面的标题和内容有外边距？

h3标签：浏览器默认样式通常是 margin-top: 1em; margin-bottom: 1em;。
p标签：浏览器默认样式通常是 margin-top: 1em; margin-bottom: 1em;
margin-block-start: 1em;
margin-block-end: 1em;
第一个图中，某个卡片内容变得很长，换行，导致这个卡片高度变高，其他卡片也会跟着变高
align-items: stretch;
它找出这一行里个子最高的那个卡片，它强迫这一行里个子矮的卡片（标题一、标题三原本只有 200px）把腿伸长，直到脚后跟都踩在这条横线上。
card-list中加入align-items: flex-start;后不在等高
说是display: flex默认加入align-items: stretch;，但是浏览器f12没有找到,被隐藏了，在样式旁边的计算样式

###标题靠顶，按钮靠底部，内容居中
<div class="card-v">
  <h3>标题 (贴顶)</h3>
  <p>这段文字想在剩下的空间里垂直居中显示。</p>
  <button>按钮 (贴底)</button>
</div>
.card-v {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.card-v p {
  margin-top: auto;    /* 把上面空白的空间吃掉一半 */
  margin-bottom: auto; /* 把下面空白的空间也吃掉一半 */
}
###右下角悬浮
<div class="bubble">
  <span class="text">这是一条消息</span>
  <span class="time">10:30</span>
</div>
.bubble {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  width: 200px;
}
.time {
  margin-left: auto; /* 先推到水平最右边 */
  margin-top: auto;  /* 如果有多行文字，再推到垂直最下边 */
}
###返回靠左，分享靠右，内容居中
<div class="toolbar">
  <span>返回</span>
  <span>标题文字</span>
  <span>分享</span>
</div>
.toolbar {
  display: flex;
}
.toolbar span:first-child {
  margin-right: auto; /* 把右边的空白全吃掉 */
}
.toolbar span:last-child {
  margin-left: auto;  /* 把左边的空白全吃掉 */
}

‌align-items: stretch; 是 Flex 布局中的默认对齐行为‌，其主要作用是让所有直接子元素（flex items）在‌交叉轴（cross axis）上拉伸至填满容器的高度或宽度‌，具体表现取决于主轴方向。