Flex布局组成与主轴,侧轴对齐方式

最新推荐文章于 2023-05-05 22:21:23 发布

mwmmt

最新推荐文章于 2023-05-05 22:21:23 发布

阅读量380

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/mwmmt/article/details/127218437

版权

flex布局,称为弹性布局,是浏览器提倡的布局模型,布局网页更灵活,方便.能够避免浮动脱标的问题.

弹性布局组成:

1.弹性容器(一般通过给父元素添加display-flex)

2.弹性盒子

3主轴(默认是x轴)

4侧轴(默认是y轴)

主轴对齐方式:

 <style>
        .box{
            width: 1000px;
            height: 400px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
            /* 默认值,起点开始排列 */
            justify-content: start;
            /* 终点开始排列 */
            justify-content: end;
            /* 主轴居中 */
            justify-content: center;
            /* 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配 */
            justify-content: space-around;
            /* 两边靠边,中间自适应 */
            justify-content: space-between;
            /* 平均对齐，不靠着容器壁，剩余空间平分 */
            justify-content: space-evenly;

        }
        .box div{
            /* 弹性盒子 */
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box div:nth-child(2n){
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

侧轴对齐方式

 <style>
        .box{
            width: 1200px;
            height: 400px;
            background-color: pink;
            display: flex;
            /* 侧轴居中 */
            align-items: center;
            /* 从上到下排列 */
            align-items: flex-start;
            /* 从下到上排列 */
            align-items: flex-end;
            /* 拉伸. 注意子元素不能设置高度*/
            align-items: stretch;
        }
        .box div{
            width: 200px;
            /* height: 200px; */
            background-color: red;
        }
        .box div:nth-child(2n){
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>