Web前端学习笔记6（align-items，align-content，flex-flow，flex，align-self，order）

本文链接：https://blog.csdn.net/m0_60531106/article/details/126514327

align-items

让子盒子沿侧轴来对齐

侧轴居中对齐：align-items: center;

拉伸，子盒子不要给高度：align-items: stretch;

div{
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            flex-direction: column;
            /* 默认主轴为x轴 */
            justify-content: center;
            /* 我们需要一个侧轴也居中对齐 */
            align-items: center;
            /* 拉伸，子盒子不要给高度 */
            /* align-items: stretch; */
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }

align-content

有换行的情况下，让子盒子关于侧轴对齐

使行间盒子挨着：align-content: flex-start;

所有盒子居中对齐：align-content: center;

一个贴着上沿一个贴着下沿：align-content: space-between;

上下相同间距，中间对齐：align-content: space-around;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用align-centent */
            /* 使行间盒子挨着 */
            /* align-content: flex-start; */
            /* 所有盒子居中对齐 */
            /* align-content: center; */
            /* 一个贴着上沿一个贴着下沿 */
            /* align-content: space-between; */
            /* 上下相同间距，中间对齐 */
            align-content: space-around;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

flex-flow

把设置主轴方向和是否换行（换列）简写

flex-flow: column wrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* flex-wrap: wrap; */
            /* flex-direction: column; */
            /* 把设置主轴方向和是否换行（换列）简写 */
            flex-flow: column wrap;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

flex

将剩余的空间分配成份数

p span{

flex: 1;

}

p span:nth-child(2)

{

flex: 2;

background-color: purple;

}

span有三个，两个占一份，中间的占两份

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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: red;
        }
        section div:nth-child(2){
            flex: 1;
            background-color: green;
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: blue;
        }
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        p span{
            flex: 1;
        }
        p span:nth-child(2)
        {
            flex: 2;
            background-color: purple;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>

    <p>
        <span>1</span><span>2</span><span>3</span>
    </p>
</body>
</html>

align-self，order

align-self：可以改变单个元素侧轴的摆放

order:调换两人子元素的位置，数值越小越前默认为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 500px;
            background-color: pink;
            align-items: center;
        }
        div span{
            width: 150px;
            height: 100px;
            margin: 10px;
            background-color: red;
        }
        div span:nth-child(2)
        {
            /* 数值越小越前 默认为0*/
            order: -1;
        }
        div span:nth-child(1)
        {
            /* align-self可以改变单个元素侧轴的摆放 */
            align-self: flex-end;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>