当前位置： 移动技术网 > IT编程>网页制作>CSS > 弹性布局 - flex对齐

弹性布局 - flex对齐

2019年03月02日  | 移动技术网IT编程  | 我要评论

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网