弹性布局 - flex对齐

flex对齐

flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。

主轴 justify-content

 

justify-content对齐方式共有5种对齐方式：

flex-start ：主轴起点边缘开始，从左向右。

flex-end ：主轴终点边缘开始，从右向左。

center ：主轴中间开始，向两端伸缩。

space-between：主轴两端对齐。

space-around ： 与space-between区别就是起始端与结束端间隔相等。

交叉轴： align-content

align-content对齐方式共有6种。除了与justify-content前5种方式一样外，多了一种stretch对齐方式。

stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

align-items

用于单行/单列对齐，沿主轴方向对齐。

flex-start ：主轴起点。

flex-end ：主轴终点。

center：主轴中间。

stretch ： 拉伸。

baseline：基线对齐。

自身对齐方式：align-self

用于单行（或单列），沿交叉轴方向对齐。

flex-start ：交叉轴起点。

flex-end ：交叉轴终点。

center：交叉轴中间。

stretch ： 拉伸。

baseline：基线对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .box{
            width: 50px;
            height: 50px;
        }
        .flexbox-row{
            margin: 50px auto;
            display: flex;
            flex-direction: row;
            width: 120px;
            height: 320px;
            border: 1px #ccc solid;
            flex-wrap: wrap;
            /**
                左上角
                justify-content: flex-start;
                align-content: flex-start;

                左下角
                justify-content: flex-start;
                align-content: flex-end;

                右上角
                justify-content: flex-end;
                align-content: flex-start;
             */
            justify-content: flex-end;
            align-content: flex-end;
        }
    </style>
</head>
<body>

<div class="flexbox-row">
    <div class="box" style="background-color:coral;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:khaki;">C</div>
    <div class="box" style="background-color:pink;align-self: flex-start;">D</div>
    <div class="box" style="background-color:lightgrey;">E</div>
    <div class="box" style="background-color:lightgreen;">F</div>
</div>
<script>

</script>
</body>
</html>