flex布局父项及子项常见属性

最新推荐文章于 2025-04-25 16:27:26 发布

原创最新推荐文章于 2025-04-25 16:27:26 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

博客主要介绍了flex布局的相关知识，包括父项常见属性，如flex-direction设置主轴方向、justify-content设置主轴子元素排列方式等；还介绍了子项常见属性，如flex属性分配剩余空间、align-self控制子项侧轴排列等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.flex布局父项常见属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VgsJiC2G-1685879909207)(C:\Users\HCKB\Pictures\Camera Roll\微信图片_20230601195746.jpg)]

（1）flex-direction设置主轴方向：

默认主轴就是x轴，水平向右

侧轴是y轴，水平向下

主轴和侧轴是可以变化的

 div {
            /* 给父级添加flex属性 */
            display: flex;
            width: 80%;
            height: 300px;
            background-color: aqua;
            /* 默认的主轴是x轴 y轴是侧轴*/
            /* 元素是跟着主轴排列的 */
            flex-direction: row;
            /* 翻转  主轴从右向左 */
            flex-direction: row-reverse;
            /*  从上到下  主轴为y轴  那么x轴是侧轴 */
            flex-direction: column;
            /* 从下到上   */
            flex-direction: column-reverse;
        }

（2）justify-content 设置主轴上的子元素排列方式

使用前先确定好主轴是哪个

 div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: aqua;
            /* 默认主轴是x轴 */
            flex-direction: row;
            /* justify-content 设置主轴上的子元素排列方式 */
            /* 默认从头部开始 */
            justify-content: flex-start;
            /* 从尾部开始 */
            justify-content: flex-end;
            /* 在主轴居中对齐 */
            justify-content: center;
            /* 平分剩余空间 */
            justify-content: space-around;
            /* 先两边贴边 再平分剩余空间 */
            justify-content: space-between;
        }

（3）flex-wrap子元素是否换行

默认不换行，如果装不开，会缩小子元素的宽度，放到父元素里面

  div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: aqua;
            /* 默认不换行 */
            flex-wrap: nowrap;
            /* 换行 */
            flex-wrap: wrap;
        }

（4）align-items设置侧轴子元素排列（单行）

  div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: aqua;
            flex-direction: row;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
            /* 拉伸  但子盒子不要给高度 */
            align-items: stretch;
            /* 侧轴从上到下 */
            align-items: flex-start;
            /* 侧轴从下到上 */
            align-items: flex-end;
        }

（5）align-content设置侧轴上的子元素排列方式（多行）

只能用于子项出现换行的情况，再单行下是没有效果的

  div {
            display: flex;
            width: 700px;
            height: 700px;
            background-color: aqua;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式用 align-content*/
            /* 默认值 在侧轴的头部开始排列 */
            align-content: flex-start;
            /* 在侧轴尾部开始排列 */
            align-content: flex-end;
            /* 在侧轴中间显示 */
            align-content: center;
            /* 子项在侧轴平分剩余空间 */
            align-content: space-around;
            /* 子项在侧轴先分布在两头，再平分剩余空间 */
            align-content: space-between;
            /* 拉伸  不要给子盒子高度   设置子项元素高度平分父元素高度 */
            align-content: stretch
        }

（6）flex-flow 是flex-direction和flex-wrap的复合属性

 flex-flow: column wrap;

2.flex布局子项常见属性

（1）flex属性

定义子项目分配剩余空间，用flex表示占多少份

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

  <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: blue;
            margin: 0 auto;
        }
        /* 左右盒子固定  中间盒子自适应 */
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: darkviolet;
        }
        section div:nth-child(2) {
            flex: 1;
            background-color: chartreuse;
        }
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: rgb(227, 99, 14);
        }
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: blue;
            margin: 0 auto;
        }
		/* 三个盒子都是自适应 */
        p span {
            flex: 1;
        }
        p span:nth-child(2) {
            flex: 2;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

（2）align-self 控制子项自己在侧轴上的排列方法

可以允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: blue;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: rgb(255, 0, 0);
            margin-right: 5px;
        }
        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

(3)order属性定义项目的排列顺序

数值越小，排列越靠前，默认值为0

注意：和z-index不一样

    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: blue;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: rgb(255, 0, 0);
            margin-right: 5px;
        }
        div span:nth-child(2) {
            /* 默认是0 -1比0小 */
            order: -1;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>