弹性布局 - flex对齐

2019-03-01 10:12:32来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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>

 


原文链接:https://www.cnblogs.com/whnba/p/10456832.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:第十二课 CSS基本选择器 css学习2

下一篇:山西大同大学教务处学生端--送给学弟,学妹的礼物,可在PC端,手