flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between

• 前端

flex布局——align-items属性垂直之共有flex-start、center、flex-end& justify-content属性水平之space-around、space-between

对容器进行display: flex布局之后，可通过justify-content来调整容器中子元素整体的布局的位置，其值分别有如下几个：

注：以下情况均由主轴为从左到右方向进行，其从下到上的主轴情况原理类似

  • flex-start（默认值）

    即默认状态下的在主轴的左边位置，页面代码如下：

  /* align-items: flex-start; */justify-content: flex-start;

效果-水平-开头

在这里插入图片描述

  • center

    设置为center值之后，其子元素整体的位置则是在主轴的中心位置，其效果如下：

align-items: center; // 垂直居中

效果-水平-中心

在这里插入图片描述

justify-content: center;  //水平-居中

效果

在这里插入图片描述

  • flex-end

    其flex-end则是在主轴的右边位置，效果如下图所示：

align-items: flex-end; // 垂直结尾

效果-水平-结尾

在这里插入图片描述

justify-content: flex-end // 水平结尾

效果

在这里插入图片描述

  • space-around-中间间隔

    该值会将主轴上剩余空间平均的充斥在各个子元素的周围（类似于有相同的margin-left以及margin-right），效果如下图所示：

justify-content: space-around; // 中间间隔

在这里插入图片描述

  • space-between-两边撑开

    space-between与space-around造成的效果类似，稍有不同的为其第一个子项与最后一个和容器直接没有间隔，其效果如下：

justify-content: space-between; // 两边撑开

在这里插入图片描述

代码

即默认状态下的在侧轴的上边位置，页面代码如下：




    
    Title
    
        #container {
            display: flex;
            margin: 0px auto;
            width: 800px;
            height: 400px;
            background-color: purple;
            align-items: flex-start;
            /* align-items: center; */
            /* align-items: flex-end; */
        }

        .item {
            background-color: pink;
            margin-left: 10px;
            margin-top: 10px;
            width: 250px;
            height: 100px;
        }
    



    
        1
        2
        3
        4

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/335c368237.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐