如何使得单个项目有与其他项目不一样的对齐方式-CSDN博客

本文链接：https://blog.csdn.net/qq_53895518/article/details/138217910

本文介绍了如何在HTML和CSS中使用`align-self`属性调整`<li>`标签在Flex布局中的对齐方式，以达到预期效果，并推荐查阅菜鸟教程以深入了解Flex布局语法。

摘要由CSDN通过智能技术生成

今天修改项目的样式，有这么个问题，便记录下。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

上代码🌰，自己敲一边，更好理解

html代码👇

    <ul>
        <li>静夜思</li>
        <li>风起云涌</li>
        <li>举杯邀明月</li>
        <li>抽刀断水水更流</li>
    </ul>

css代码👇

    ul{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 200px;
    }
    ul li {
        list-style: none;
        background-image: url("./images/20240426143300.png"); //你本地背景图即可
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        margin: 5px;
        padding:0 10px;
        height: 30px;
        line-height: 30px;
    }

效果如下：（效果不是很理想，别急，接着往下看）👇

对每个li标签使用了 align-self: flex-start; 便有了我想要的效果👇

整体代码👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        width: 200px;
    }
    ul li {
        list-style: none;
        background-image: url("./images/20240426143300.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        margin: 5px;
        padding:0 10px;
        height: 30px;
        line-height: 30px;
        align-self: flex-start;  //允许单个项目有与其他项目不一样的对齐方式
    }
</style>
<body>
    <ul>
        <li>静夜思</li>
        <li>风起云涌</li>
        <li>举杯邀明月</li>
        <li>抽刀断水水更流</li>
    </ul>
</body>
</html>

还是有点疑惑的小伙伴，可以去看官网详细介绍 👉 Flex 布局语法教程 | 菜鸟教程