弹性盒子的使用

Tao13197

于 2024-09-04 16:39:32 发布

阅读量435

点赞数 3

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_60897029/article/details/141897745

版权

1.概念在父级元素下设置弹性盒属性所有的子级都会遵循对应的弹性规则

2.作用控制所有自己元素在父级元素上的排列位置

3. 如何形成弹性盒

display: flex;

4.形成弹性盒后的特点(主轴和侧轴)

注意在弹性盒中所有元素不考虑元素类型所有的子级元素都可以直接设置宽高

设置主轴的对齐方式justify-content属性值:

flex-start 主轴开始位置排列

flex-end 主轴结束位置排列

center 主轴的居中位置排列

space-between 两端对齐，其余空间自动分配

space-around 元系的左右空间分配是相等的

space-evenly 所有空间都是自动平均分配

设置侧轴的对齐方式align-items属性值:

flex-start 侧轴的开始位置排列

flex-end 侧轴结束位置排列

center 侧轴的居中位置排列

baseline 基线对齐(将不同大小的文字进行靠底部的对齐)

stretch 拉伸

控制子级元素换行显示弹性盒子超出父级范围宽度默认进行挤压不换行flex-wrap属性值

no-wrap 默认值不换行

wrap 换行

wrap-reverse 反着换行

控制侧轴的间距align-content属性值:

flex-start 主轴开始位置排列

flex-end 主轴结束位置排列

center 主轴的居中位置排列

space-between 两端对齐，其余空间自动分配

space-around 元素的左右空间分配是相等的

space-evenly 所有空间都是自动平均分配

<!DOCTYPE html>
<html lang="enabled">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            display: flex;
            flex-direction: row-reverse;/*从右往左，改变主轴排列方向*/
            justify-content: space-evenly;/*主轴排列*/
            align-items: center;/*侧轴排列*/
            flex-wrap: wrap;/*定义子元素是否换行*/
            align-content: center /*行与行之间的距离*/
        }
        div{
            background-color: rgba(172, 116, 224, 0.692);
            width: 100px;
            height: 100px;
            display: block;
            border: 1px solid black;
            border-radius: 40%;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <section>
    <div>海绵波比</div>
    <div>天线波比</div>
    <div>花园波比</div>
    <div>鲨鱼波比</div>
    <div>骑鸟波比</div>
    <div>熬夜波比</div>
    <div>花园波比</div>
    <div>帅帅波比</div>
    <div>炮形态波比</div>
    </section>
    <!-- 弹性盒属性的使用
    1.概念 在父级元素下设置弹性盒属性所有的子级都会遵循对应的弹性规则
    2.作用 控制所有自己元素在父级元素上的排列位置
    3. 如何形成弹性盒
        display: flex;
    4.形成弹性盒后的特点(主轴和侧轴)
    注意 在弹性盒中所有元素 不考虑元素类型 所有的子级元素都可以直接设置宽高 
    
    设置主轴的对齐方式justify-content属性值: 
        flex-start 主轴开始位置排列
        flex-end 主轴结束位置排列
        center 主轴的居中位置排列
        space-between 两端对齐，其余空间自动分配
        space-around 元系的左右空间分配是相等的
        space-evenly 所有空间都是自动平均分配

    设置侧轴的对齐方式align-items属性值:
        flex-start 侧轴的开始位置排列
        flex-end 侧轴结束位置排列
        center 侧轴的居中位置排列
        baseline 基线对齐(将不同大小的文字进行靠底部的对齐)
        stretch 拉伸


    控制子级元素换行显示弹性盒子超出父级范围宽度默认进行挤压不换行flex-wrap属性值
        no-wrap 默认值 不换行
        wrap 换行
        wrap-reverse 反着换行

    控制侧轴的间距align-content属性值:
        flex-start 主轴开始位置排列
        flex-end 主轴结束位置排列
        center 主轴的居中位置排列
        space-between 两端对齐，其余空间自动分配
        space-around 元素的左右空间分配是相等的
        space-evenly 所有空间都是自动平均分配

    -->

</body>
</html>