flex布局子项常见属性flex:＜number＞；

最新推荐文章于 2024-04-26 20:24:07 发布

_XinXinM_

最新推荐文章于 2024-04-26 20:24:07 发布

阅读量869

点赞数

本文链接：https://blog.csdn.net/binbinhxx/article/details/111941986

版权

本文介绍了flex布局的原理，包括align-self控制子元素对齐、order属性的排列顺序，以及如何使用flex属性将元素平均分成三等分和指定特定子元素占据更多空间。通过实例展示了如何在HTML和CSS中实现这些布局技巧。

摘要由CSDN通过智能技术生成

1.- flex 子项目占的份数

align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后是顺序）
2.flex属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item{
	flex:<number>;/*default 0*/
}

flex:1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display:flex;
            width:60%;
            height:150px;
            background-color: pink;
            margin:0 auto;
        }
        section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: aqua;
        }
        section div:nth-child(2){
            flex:1;
            width: 100px;
            height: 150px;
            background-color: rgba(129, 248, 113, 0.424);
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: rgb(248, 31, 165);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

在这里插入图片描述
平均分成三等分
三个span标签没有设置宽度，从布局角度来说剩余宽度就是整个宽度，从整个宽度里面再分成三份，各占三分之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display:flex;
            width:60%;
            height:150px;
            background-color: pink;
            margin:0 auto;
        }
        section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: aqua;
        }
        section div:nth-child(2){
            flex:1;
            width: 100px;
            height: 150px;
            background-color: rgba(129, 248, 113, 0.424);
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: rgb(248, 31, 165);
        }
        p{
            display:flex;
            width:60%;
            height:150px;
            background-color: rgb(251, 129, 72);
            margin:100px auto;
        }
        p span{
            flex:1;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
</html>

在这里插入图片描述
中间盒子占两份：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display:flex;
            width:60%;
            height:150px;
            background-color: pink;
            margin:0 auto;
        }
        section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: aqua;
        }
        section div:nth-child(2){
            flex:1;
            width: 100px;
            height: 150px;
            background-color: rgba(129, 248, 113, 0.424);
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: rgb(248, 31, 165);
        }
        p{
            display:flex;
            width:60%;
            height:150px;
            background-color: rgb(251, 129, 72);
            margin:100px auto;
        }
        p span{
            flex:1;
        }
        p span:nth-child(2) {
            flex:2;
            background-color: green;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
</html>