欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

弹性布局 - flex对齐

程序员文章站 2022-05-25 19:45:09
flex对齐 flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。 主轴 justify-content justify-content对齐方式共有5种对齐方式： flex-start ：主轴起点边缘开始，从左向右。 flex-end ：主轴终点边缘开始，从右向 ......

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>

 

上一篇： SqlServer中用SQL语句附加数据库及修改数据库逻辑文件名

下一篇： 小米9拍照创历史！DxOMark总分世界第三 视频拍摄世界第一

推荐阅读