如何在Flexbox中为不同行列设置不同的元素对齐方式？

根据你提供的布局需求，调整HTML结构和CSS样式即可实现文本的正确对齐，以下是修改后的完整代码：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <title>Page title</title>
</head>
<body>
    <ul>
        <li>
            <img src="https://avt.mkklcdnv6temp.com/23/q/23-1612849460.jpg" alt="漫画封面">
            <div class="content">
                <h4>It feels so wrong to bite people</h4>
                <span><a href="" time="2 hours ago">CHAPTER 93</a></span>
                <span><a href="" time="2 hours ago">CHAPTER 92</a></span>
                <span><a href="" time="1 day ago">CHAPTER 91</a></span>
            </div>
        </li>
        <li>
            <img src="https://avt.mkklcdnv6temp.com/5/d/23-1610420366.jpg" alt="漫画封面">
            <div class="content">
                <h4>Rebirth Of The Earth Immortal Venerable</h4>
                <span><a href="" time="3 hours ago">CHAPTER 164</a></span>
                <span><a href="" time="7 days ago">CHAPTER 163</a></span>
                <span><a href="" time="15 days ago">CHAPTER 162</a></span>
            </div>
        </li>
    </ul>
</body>
</html>

修改后的CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 确保内边距不影响元素尺寸 */
} 

ul, li{
    list-style: none;
}

li{
    border: 2px solid green;
    display: flex;
    align-items: flex-start; /* 内容顶部对齐 */
    height: 200px;
    padding: 1rem; /* 给内容添加内边距避免贴边 */
    gap: 1rem; /* 图片与内容容器的间距 */
}

/* 控制图片尺寸，避免撑破容器 */
li img {
    width: 120px;
    height: 100%;
    object-fit: cover; /* 保持图片比例 */
}

.content {
    flex: 1; /* 占据li剩余空间 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 标题在上，章节列表在下分散对齐 */
}

h4{
    color: #059E9A;
    margin-bottom: 1rem;
}

li span{
    display: flex;
    align-items: center;
    justify-content: space-between; /* 章节名与时间左右分离 */
    padding: 0.3rem 0;
}

a{
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    gap: 0.4rem; /* 图标与章节名的间距 */
}

li a:before{
    font-family: 'Font Awesome 5 Free';
    content: "\f101";
    font-weight: 900;
}

li a:after {
    content: attr(time);
    color: #aeae9f;
    font-size: 0.75rem;
    font-style: italic;
    margin-left: auto; /* 强制时间靠右对齐 */
}

关键修改说明 #

1. HTML结构优化：给右侧标题和章节添加.content容器，让li内部形成「图片 + 内容容器」的横向Flex布局
2. Flex布局调整：
   • li设置align-items: flex-start实现内容顶部对齐
   • .content设置flex:1占据剩余空间，并用flex-direction: column垂直排列标题和章节
   • 章节的span用justify-content: space-between实现章节名与时间的左右分离
3. 移除float：Flex布局下无需使用float，改用Flex属性实现元素对齐，避免布局冲突
4. 图片尺寸控制：给图片设置固定宽高和object-fit: cover，确保图片比例正确且不会撑破容器

内容的提问来源于stack exchange，提问作者gaito Uzumaki