flex布局子项常见属性align-self、order

1.align-self控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继续继承父元素align-items属性,如果没有父元素,则等同于strech。

div span:nth-child(3){
            align-self:flex-end;
        }

让第三个盒子下来:

 align-self:flex-end;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            display: flex;
            width:80%;
            height:300px;
            background-color: pink;
            /* 让三个子孩子同时在侧轴上移动 */
            /* align-self:flex-end; */
        }
        
        div span{
            width:150px;
            height:100px;
            background-color:aqua;
            margin-right: 5px;
        }
        div span:nth-child(3){
            align-self:flex-end;
        }
    style>
head>
<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
    div>
body>
html>m

flex布局子项常见属性align-self、order_第1张图片
order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0;
注意:和z-index不一样。

/* 默认是0 -1比0小所以在前面 */
            order:-1;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            display: flex;
            width:80%;
            height:300px;
            background-color: pink;
            /* 让三个子孩子同时在侧轴上移动 */
            /* align-self:flex-end; */
        }
        
        div span{
            width:150px;
            height:100px;
            background-color:aqua;
            margin-right: 5px;
        }
        div span:nth-child(2){
            /* 默认是0 -1比0小所以在前面 */
            order:-1;
            font-size: 80px;
        }
        div span:nth-child(3){
            align-self:flex-end;
        }
    style>
head>
<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
    div>
body>
html>

flex布局子项常见属性align-self、order_第2张图片

你可能感兴趣的:(flex布局子项常见属性align-self、order)