前端学习：html的flex盒子模型

最新推荐文章于 2024-07-19 13:18:23 发布

我要去小米

最新推荐文章于 2024-07-19 13:18:23 发布

阅读量398

点赞数 11

文章标签：前端学习 html

本文链接：https://blog.csdn.net/photobooth/article/details/137046821

版权

对于flex盒子模型，认准主轴和侧轴

父元素和子元素作用，子元素内部不影响

在父元素display：flex开启盒子模型

flex-direction：（主轴）

属性：

flex-direction：row（默认从左向右一排）

flex-direction： row-reverse（从右向左，靠右边）

flex-direction: column;（主轴改变，从上到下）

justify-content（富余空间管理）

属性：

justify-content: flex-start;（内部正常的从左向右，靠左）

justify-content: flex-end;（正常排序从左向右，整体靠右）

justify-content: space-around;（内部各元素直接有相同的间距）

justify-content: space-between;（内部元素，两边靠边，中间各元素直接平均间隔）

justify-content: space-evenly;（内部元素均匀间隔）

align-items（侧轴空间管理）

属性：

align-items: stretch;

align-items: baseline;

align-items: flex-start;

align-items: flex-end;

align-items: center;（侧轴居中）

 <style>
        /* flex盒子测试 */
        .boxflex{
            border: 3px red solid;
            width: 600px;
            height: 500px;
            display: flex;
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */

            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-around; */
            /* justify-content: space-between; */
            /* justify-content: space-evenly; */


            align-items: stretch;
        /* align-items: baseline; */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        }
        .boxflex>div{
            width: 100px;
            height: 100px;
            font-size: 30px;
        }
        .boxflex>div:nth-child(1){
            background-color: aqua;
        }
        .boxflex>div:nth-child(2){
            background-color: rgb(255, 0, 200);
        }
        .boxflex>div:nth-child(3){
            background-color: rgb(0, 255, 38);
        }
        .boxflex>div:nth-child(4){
            background-color:blue;
        }
    </style>


<body>
    <div class="boxflex">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>