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

博客主要介绍了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>

right: 5px;
}
div span:nth-child(2) {
/* 默认是0 -1比0小 */
order: -1;
}

1 2 3
~~~
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值