• 弹性父元素2


    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. * {
    10. margin: 0;
    11. padding: 0;
    12. }
    13. div {
    14. width: 600px;
    15. height: 500px;
    16. background: yellow;
    17. display: flex;
    18. /*
    19. 弹性子元素主轴的对齐方式 justify-content
    20. 什么时候是主轴?取决于它的排列方式
    21. 如果弹性子元素自左向右在一排显示 那么x轴是主轴
    22. 如果弹性子元素自上而下在一竖排显示 那么y轴是主轴
    23. */
    24. justify-content: space-between;
    25. /* 6个值
    26. 1. flex-start
    27. 2. flex-end
    28. 3. center
    29. 4. space-between
    30. 5. space-evenly
    31. 6. space-around */
    32. /* 更改弹性子元素的排列方式flex-direction */
    33. /* flex-direction:column-reverse; */
    34. /*
    35. row 自左向右在一排显示
    36. row-reverse 自左向右翻转
    37. column 自上而下竖着显示
    38. column-reverse 自上而下翻转
    39. */
    40. /* 弹性子元素侧轴的对齐方式 align-items
    41. 如果弹性子元素自左向右在一排显示 那么y轴是侧轴
    42. 如果弹性子元素自上而下在一竖排显示 那么x轴是侧轴
    43. */
    44. /* flex-start flex-end center baseline*/基线对齐一般不用
    45. /* align-items: center; */
    46. align-items:baseline;
    47. }
    48. p {
    49. width: 100px;
    50. height: 100px;
    51. background: #f0f;
    52. }
    53. p:nth-child(2){
    54. padding-top: 50px;
    55. }
    56. 复合
    57. ul {
    58. background: pink;
    59. display: flex;
    60. width: 400px;
    61. height: 400px;
    62. /* flex-wrap: wrap;
    63. flex-direction: column; */
    64. /* flex-wrap 与 flex-direction 的复合写法 */
    65. flex-flow: column wrap;
    66. margin: 0 auto;
    67. }
    68. li {
    69. width: 150px;
    70. height: 120px;
    71. background: purple;
    72. }
    73. nav {
    74. width: 300px;
    75. height: 300px;
    76. background: orange;
    77. /* position: relative; */
    78. display: flex;
    79. justify-content: center;
    80. align-items: center;
    81. }
    82. span {
    83. background-color: orchid;
    84. /* position: absolute;
    85. left: 0; right: 0; bottom: 0; top: 0;
    86. margin: auto;
    87. width: 50px;
    88. height: 50px; */
    89. }
    90. /*用弹性盒去写水平垂直,只需要加上上边的这个粉色的,不需要定位,偏移,行内块找个空标签vertical-align:middle; height:100%什么之类的 */
    91. style>
    92. head>
    93. <body>
    94. <div>
    95. <p>1p>
    96. <p>2p>
    97. <p>3p>
    98. <p>4p>
    99. <p>5p>
    100. div>
    101. <ul>
    102. <li>li>
    103. <li>li>
    104. <li>li>
    105. <li>li>
    106. ul>
    107. <nav>
    108. <span>111span>
    109. nav>
    110. body>
    111. html>

    什么时候是主轴取决于它的排列方式 

    justify-content:flex-start;默认值

      justify-content:flex-end;

     justify-content:center;

    中间是两端的倍数justify-content:space-around;

    平均分配justify-content:space-evenly;

    两端对齐 justify-content:space-between ;

    自上而下的排用column

    还可以竖着方向用横着的那些元素,如space-between、space-evenly、space-around flex-end

    justify-content:space-evenly

    flex-direction: column-reverse

    竖着翻转在竖着的下面 justify-content:flex- end

    侧轴

    自左向右排 x是主轴,自然y是侧轴

    加个flex-dierection: column;

    这时控制的是水平方向

  • 相关阅读:
    Vue3修改Element-plus语言与项目国际化
    Python多平台word转pdf
    【AWS系列】六、 AWS Serverless之Lambda
    怎样创建vue3项目
    CSS宽度100%和宽度100vw之间有什么不同?
    关于#php#的问题:wordpress友联头像不显示是啥问题
    2021 第四届 浙江省大学生网络与信息安全竞赛技能赛 预赛 Writeup,4题
    深入理解AQS之CountDownLatch
    23种设计模式趣谈
    养狗日记-计算机网页设计与制作(大作业报告格式)
  • 原文地址:https://blog.csdn.net/weixin_57541715/article/details/128064700