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

    align-items

    让子盒子沿侧轴来对齐

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

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

    1. div{
    2.             display: flex;
    3.             width: 800px;
    4.             height: 400px;
    5.             background-color: pink;
    6.             flex-direction: column;
    7.             /* 默认主轴为x轴 */
    8.             justify-content: center;
    9.             /* 我们需要一个侧轴也居中对齐 */
    10.             align-items: center;
    11.             /* 拉伸，子盒子不要给高度 */
    12.             /* align-items: stretch; */
    13.         }
    14.         div span{
    15.             width: 150px;
    16.             height: 100px;
    17.             background-color: purple;
    18.             color: #fff;
    19.             margin: 10px;
    20.         }

    align-content

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

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

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

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div{
    10.             display: flex;
    11.             width: 800px;
    12.             height: 400px;
    13.             background-color: pink;
    14.             /* 换行 */
    15.             flex-wrap: wrap;
    16.             /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用align-centent */
    17.             /* 使行间盒子挨着 */
    18.             /* align-content: flex-start; */
    19.             /* 所有盒子居中对齐 */
    20.             /* align-content: center; */
    21.             /* 一个贴着上沿一个贴着下沿 */
    22.             /* align-content: space-between; */
    23.             /* 上下相同间距，中间对齐 */
    24.             align-content: space-around;
    25.         }
    26.         div span{
    27.             width: 150px;
    28.             height: 100px;
    29.             background-color: purple;
    30.             color: #fff;
    31.             margin: 10px;
    32.         }
    33.     style>
    34. head>
    35. <body>
    36.     <div>
    37.         <span>1span>
    38.         <span>2span>
    39.         <span>3span>
    40.         <span>4span>
    41.         <span>5span>
    42.         <span>6span>
    43.     div>
    44. body>
    45. html>

    flex-flow

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

    flex-flow: column wrap

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div{
    10.             display: flex;
    11.             width: 800px;
    12.             height: 400px;
    13.             background-color: pink;
    14.             /* flex-wrap: wrap; */
    15.             /* flex-direction: column; */
    16.             /* 把设置主轴方向和是否换行（换列）简写 */
    17.             flex-flow: column wrap;
    18.         }
    19.         div span{
    20.             width: 150px;
    21.             height: 100px;
    22.             background-color: purple;
    23.             color: #fff;
    24.             margin: 10px;
    25.         }
    26.     style>
    27. head>
    28. <body>
    29.     <div>
    30.         <span>1span>
    31.         <span>2span>
    32.         <span>3span>
    33.         <span>4span>
    34.         <span>5span>
    35.         <span>6span>
    36.     div>
    37. body>
    38. html>

    flex

    将剩余的空间分配成份数

    p span{

                flex: 1;

            }

            p span:nth-child(2)

            {

                flex: 2;

                background-color: purple;

            }

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         section{
    10.             display: flex;
    11.             width: 60%;
    12.             height: 150px;
    13.             background-color: pink;
    14.             margin: 0 auto;
    15.         }
    16.         section div:nth-child(1){
    17.             width: 100px;
    18.             height: 150px;
    19.             background-color: red;
    20.         }
    21.         section div:nth-child(2){
    22.             flex: 1;
    23.             background-color: green;
    24.         }
    25.         section div:nth-child(3){
    26.             width: 100px;
    27.             height: 150px;
    28.             background-color: blue;
    29.         }
    30.         p {
    31.             display: flex;
    32.             width: 60%;
    33.             height: 150px;
    34.             background-color: pink;
    35.             margin: 100px auto;
    36.         }
    37.         p span{
    38.             flex: 1;
    39.         }
    40.         p span:nth-child(2)
    41.         {
    42.             flex: 2;
    43.             background-color: purple;
    44.         }
    45.     style>
    46. head>
    47. <body>
    48.     <section>
    49.         <div>div>
    50.         <div>div>
    51.         <div>div>
    52.     section>
    53.  
    54.     <p>
    55.         <span>1span><span>2span><span>3span>
    56.     p>
    57. body>
    58. html>

     align-self，order

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div{
    10.             display: flex;
    11.             width: 800px;
    12.             height: 500px;
    13.             background-color: pink;
    14.             align-items: center;
    15.         }
    16.         div span{
    17.             width: 150px;
    18.             height: 100px;
    19.             margin: 10px;
    20.             background-color: red;
    21.         }
    22.         div span:nth-child(2)
    23.         {
    24.             /* 数值越小越前 默认为0*/
    25.             order: -1;
    26.         }
    27.         div span:nth-child(1)
    28.         {
    29.             /* align-self可以改变单个元素侧轴的摆放 */
    30.             align-self: flex-end;
    31.             background-color: purple;
    32.         }
    33.     style>
    34. head>
    35. <body>
    36.     <div>
    37.         <span>1span>
    38.         <span>2span>
    39.         <span>3span>
    40.     div>
    41. body>
    42. html>

  • 相关阅读:
    torch.repeat
    Flutter 实现背景 Parallax 动画
    STM32G0+EMW3080+阿里云飞燕平台实现单片机WiFi智能联网功能（三）STM32G0控制EMW3080实现IoT功能
    工程实践 穿越CICD那些事
    JDK8中HashMap底层源码解析-resize方法
    深入探讨I/O模型：Java中的阻塞和非阻塞和其他高级IO应用
    vue+node使用RSA非对称加密，实现登录接口加密密码
    VSSM VMamba实现
    SpringBoot 整合 MyBatis-Plus
    Elasticsearch 聚合字段aggregate-metric-double
  • 原文地址：https://blog.csdn.net/m0_60531106/article/details/126514327