简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> List of blog posts> flex布局：flex容器中的四个属性的功能，参数，以及作用
Blogger Information
Blog 70
fans 4
comment 5
visits 103780
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex布局：flex容器中的四个属性的功能，参数，以及作用
JiaJieChen
Original
2665 people have browsed it

flex容器中的四个属性的功能/参数

flex容器是具有：display：flex的属性元素
↓语法定义

       
    
        
    2. 
        
  2. type="text/css">
    3. 
        
  3. #box{
    4. 
        
  4. display:flex;
    5. 
        
  5. }
    6. 
        
    7. 
        
  7. 

    8. 
        
    9. 
        
  9. id="box">

    • 1.主轴方向与换行方式

    元素 属性 含义
    flex-flow row nowrap 默认的，主轴水平方向排列，不换行
    flex-flow row wrap 主轴水平方向排列，进行换行
    flex-flow column nowrap 主轴垂直方向排列，不换行
    flex-flow column wrap 主轴垂直方向排列，进行换行
    ① flex-flow：row nowrap 演示

    大家可以看到flex-flow：row nowrap参数，只要里面项目增加，里面原本的项目宽度就会被压缩，不会进行换行。

    ② flex-flow：row wrap 演示

    大家可以看到flex-flow：row wrap参数，里面的项目增加了只要超过了原始设置好的宽度，那么这些项目就会进行系统自动换行，移植到下面。

    ③ flex-flow：column nowrap 演示

    大家可以看到flex-flow：column nowrap参数，是垂直方向排列，里面项目增加，里面原本的项目宽度就会被压缩，不会进行换行。

    ④ flex-flow：column wrap 演示

    大家可以看到flex-flow：column wrap参数，是垂直排列，会进行换行，原理都是一样的，只是排列方式不一样。

    2.项目在主轴上的对齐方式

    元素 属性 含义
    justify-content flex-start 默认起始线
    justify-content flex-end 终止线
    justify-content center 居中
    justify-content space-between 两端对齐
    justify-content space-around 分散对齐
    justify-content space-evenly 平均对齐
    ① justify-content：flex-start 演示

    默认起始线，没有变化

    ② justify-content：flex-end 演示

    大家可以看到justify-content：flex-end参数，把项目移动到了水平排列的终止线，也就是最底部。

    ③ justify-content：center 演示

    大家可以看到justify-content：center参数，把项目移动到了水平线的中间部位，把项目居中了！

    ④ justify-content：space-between 演示

    大家可以看到justify-space-between参数，把项目进行了两端对齐，除了最左边和最右边的外边距，其他的外边距大小都是一致的。

    ⑤ justify-content：space-around 演示

    大家可以看到justify-space-around参数，把项目进行了分散对齐。

    ⑥ justify-content：space-evenly 演示

    大家可以看到justify-space-space-evenly参数，把项目进行了平均对齐，左右的外边距都是一样的。

    3.项目在交叉轴的对齐方式

    元素 属性 含义
    align-items stretch 默认拉伸
    align-items flex-start 起始线
    align-items flex-end 终止线
    align-items center 居中
    ① align-items stretch 演示

    大家可以看到align-items stretch参数，默认在垂直方向是拉伸的。

    ② align-items flex-start 演示

    大家可以看到align-items flex-start参数，上面可以看到垂直方向默认是拉伸的，用flex-start把项目的垂直方向设置在起始线，可以看到变短了。

    ③ align-items flex-end 演示

    大家可以看到align-items flex-end参数，把项目设置在垂直方向终点线上，也就是最下面。

    ④ align-items center 演示

    大家可以看到align-items center参数，把项目定位在了垂直方向的中间部位，把项目居中了。

    4.项目在多行容器交叉轴上的对齐方式

    元素 属性 含义
    align-content flex-start 起始线
    align-content flex-end 终止线
    align-content stretch 默认拉伸
    align-content center 居中
    ① align-content flex-start 演示

    大家可以看到align-content flex-start参数，把多行项目都定位到了起始线上。下面几个参数原理都一样，就不一一演示了，下面来讲一下flex让块级元素居中的用法。

    代码块

           
      
        
      2. 
        
    2. lang="en">
      3. 
        
      4. 
        
    4. charset="UTF-8"/>
      5. 
        
    5. http-equiv="X-UA-Compatible"content="IE=edge"/>
      6. 
        
    6. name="viewport"content="width=device-width, initial-scale=1.0"/>
      7. 
        
    7. </span><span class="pln">flex容器中的四个属性的功能，参数，以及作用</span><span class="tag">
      8. 
        
    8. type="text/css">
      9. 
        
    9. *{
      10. 
        
    10. padding:0;
      11. 
        
    11. margin:0;
      12. 
        
    12. box-sizing:border-box;
      13. 
        
    13. }
      14. 
        
    14. /* 设置元素html字体为10px */
      15. 
        
    15. :root{
      16. 
        
    16. font-size:10px;
      17. 
        
    17. }
      18. 
        
    18. /* body字体为16px */
      19. 
        
    19. body{
      20. 
        
    20. font-size:1.6rem;
      21. 
        
    21. }
      22. 
        
      23. 
        
    23. /* 定义一个flex容器
      24. 
        
    24. #box {
      25. 
        
    25. border: 1px solid;
      26. 
        
    26. width: 30em;
      27. 
        
    27. height: 30em;
      28. 
        
    28. 转变为flex容器
      29. 
        
    29. display: flex;
      30. 
        
    30. 设置为水平方向排列，不换行元素
      31. 
        
    31. flex-flow: row nowrap;
      32. 
        
    32. }*/
      33. 
        
      34. 
        
    34. /* #box {
      35. 
        
    35. border: 1px solid;
      36. 
        
    36. width: 30em;
      37. 
        
    37. height: 30em;
      38. 
        
    38. display: flex;
      39. 
        
    39. 设置为水平方向排列，会进行换行
      40. 
        
    40. flex-flow: row wrap;
      41. 
        
    41. } */
      42. 
        
      43. 
        
    43. /* #box {
      44. 
        
    44. width: 30em;
      45. 
        
    45. height: 30em;
      46. 
        
    46. display: flex;
      47. 
        
    47. 设置为垂直方向排列，不会进行换行
      48. 
        
    48. flex-flow: column nowrap;
      49. 
        
    49. } */
      50. 
        
      51. 
        
    51. /* #box {
      52. 
        
    52. width: 30em;
      53. 
        
    53. height: 30em;
      54. 
        
    54. display: flex;
      55. 
        
    55. 设置为垂直方向排列，会进行换行
      56. 
        
    56. flex-flow: column wrap;
      57. 
        
    57. } */
      58. 
        
      59. 
        
    59. /* #box {
      60. 
        
    60. width: 30em;
      61. 
        
    61. height: 30em;
      62. 
        
    62. display: flex;
      63. 
        
    63. 设置项目在主轴上的对齐方式，默认起始线。
      64. 
        
    64. justify-content: flex-start;
      65. 
        
    65. } */
      66. 
        
      67. 
        
    67. /* #box {
      68. 
        
    68. width: 30em;
      69. 
        
    69. height: 30em;
      70. 
        
    70. display: flex;
      71. 
        
    71. 设置项目在主轴上的对齐方式，终止线。
      72. 
        
      73. 
        
    73. justify-content: flex-end;
      74. 
        
    74. } */
      75. 
        
      76. 
        
    76. /* #box {
      77. 
        
    77. width: 30em;
      78. 
        
    78. height: 30em;
      79. 
        
    79. display: flex;
      80. 
        
    80. 设置项目在主轴上的对齐方式，居中。
      81. 
        
      82. 
        
    82. justify-content: center;
      83. 
        
    83. } */
      84. 
        
      85. 
        
    85. /* #box {
      86. 
        
    86. width: 30em;
      87. 
        
    87. height: 30em;
      88. 
        
    88. display: flex;
      89. 
        
    89. 设置项目在主轴上的对齐方式，两端对齐。
      90. 
        
      91. 
        
    91. justify-content: space-between;
      92. 
        
    92. } */
      93. 
        
      94. 
        
    94. /* #box {
      95. 
        
    95. width: 30em;
      96. 
        
    96. height: 30em;
      97. 
        
    97. display: flex;
      98. 
        
    98. 设置项目在主轴上的对齐方式，分散对齐。
      99. 
        
      100. 
        
    100. justify-content: space-around;
      101. 
        
    101. } */
      102. 
        
      103. 
        
    103. /* #box {
      104. 
        
    104. width: 30em;
      105. 
        
    105. height: 30em;
      106. 
        
    106. display: flex;
      107. 
        
    107. 设置项目在主轴上的对齐方式，平均对齐。
      108. 
        
      109. 
        
    109. justify-content: space-evenly;
      110. 
        
    110. } */
      111. 
        
    111. /*
      112. 
        
    112. #box {
      113. 
        
    113. width: 30em;
      114. 
        
    114. height: 30em;
      115. 
        
    115. display: flex;
      116. 
        
    116. 设置项目在交叉轴的对齐方式，默认拉伸。
      117. 
        
      118. 
        
    118. align-items: stretch;
      119. 
        
    119. } */
      120. 
        
      121. 
        
    121. /* #box {
      122. 
        
    122. width: 30em;
      123. 
        
    123. height: 30em;
      124. 
        
    124. display: flex;
      125. 
        
    125. 设置项目在交叉轴的对齐方式，起始线。
      126. 
        
      127. 
        
    127. align-items: flex-start;
      128. 
        
    128. } */
      129. 
        
      130. 
        
    130. /* #box {
      131. 
        
    131. width: 30em;
      132. 
        
    132. height: 30em;
      133. 
        
    133. display: flex;
      134. 
        
    134. 设置项目在交叉轴的对齐方式，终止线。
      135. 
        
      136. 
        
    136. align-items: flex-end;
      137. 
        
    137. } */
      138. 
        
      139. 
        
    139. /* #box {
      140. 
        
    140. width: 30em;
      141. 
        
    141. height: 30em;
      142. 
        
    142. display: flex;
      143. 
        
    143. 设置项目在交叉轴的对齐方式，居中。
      144. 
        
      145. 
        
    145. align-items: center;
      146. 
        
    146. } */
      147. 
        
      148. 
        
    148. #box {
      149. 
        
    149. width:30em;
      150. 
        
    150. height:30em;
      151. 
        
    151. display:flex;
      152. 
        
    152. /* 设置项目在多行容器交叉轴上的对齐方式，起始线。 */
      153. 
        
    153. flex-flow:row wrap;
      154. 
        
    154. align-content:flex-start;
      155. 
        
    155. }
      156. 
        
      157. 
        
    157. #box > .boxder {
      158. 
        
    158. border:1pxsolid;
      159. 
        
      160. 
        
    160. background:lightgreen;
      161. 
        
    161. width:5em;
      162. 
        
    162. height:5em;
      163. 
        
    163. }
      164. 
        
      165. 
        
    165. 

      166. 
        
      167. 
        
    167. id="box">
      168. 
        
    168. class="boxder">项目1
  • class="boxder">项目2
  • class="boxder">项目3
  • class="boxder">项目4
  • class="boxder">项目5
  • class="boxder">项目6
  • class="boxder">项目7
  • class="boxder">项目8
  • class="boxder">项目9
  • class="boxder">项目10

    • flex简单实现让项目居中

    怎么样很简单吧？几行代码搞定。不像之前的定位要设置很多参数，使用flex布局会更加的简洁方便！

    代码块

           
      
        
      2. 
        
    2. lang="en">
      3. 
        
      4. 
        
    4. charset="UTF-8"/>
      5. 
        
    5. http-equiv="X-UA-Compatible"content="IE=edge"/>
      6. 
        
    6. name="viewport"content="width=device-width, initial-scale=1.0"/>
      7. 
        
    7. </span><span class="pln">flex简单实现让项目居中</span><span class="tag">
      8. 
        
    8. type="text/css">
      9. 
        
    9. *{
      10. 
        
    10. box-sizing:border-box;
      11. 
        
    11. }
      12. 
        
    12. #box1 {
      13. 
        
    13. border:1pxsolid;
      14. 
        
    14. width:25em;
      15. 
        
    15. height:25em;
      16. 
        
    16. background:lightpink;
      17. 
        
    17. /* 设为flex容器 */
      18. 
        
    18. display:flex;
      19. 
        
    19. /* 让这个项目在水平线上居中 */
      20. 
        
    20. justify-content:center;
      21. 
        
    21. /* 让这个项目在交叉轴上居中 */
      22. 
        
    22. align-items:center;
      23. 
        
    23. }
      24. 
        
    24. #box2 {
      25. 
        
    25. border:1pxsolid;
      26. 
        
    26. width:15em;
      27. 
        
    27. height:15em;
      28. 
        
    28. background:limegreen;
      29. 
        
    29. }
      30. 
        
      31. 
        
    31. 

      32. 
        
      33. 
        
    33. id="box1">
      34. 
        
    34. id="box2">
      35. 
        
      36. 
        
      37. 
        
      38.
    Correcting teacher：天蓬老师天蓬老师

    Correction status：qualified

    Teacher's comments：
    Statement of this Website
    The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
    All comments Speak rationally on civilized internet, please comply withNews Comment Service Agreement
    0 comments
    Author's latest blog post
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！