简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实例演示flex常用的6个属性
Blogger Information
Blog 46
fans 2
comment 0
visits 19469
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常用的6个属性
P粉314265155
Original
541 people have browsed it

flex必须知道的三个属性

页面布局

  1. @import '../css/reset.css';
  4. /* 页眉页脚 */
  5. /* body header,
  6. body footer{ 
  7.     background-color: aqua;
  8.     height: 50px;
  9. } */
  11. body header,
  12. body footer {
  13.   height: 50px;
  14.   background-color: lightgreen;
  15. }
  17. body .wrap {
  18.     max-width: 1000px;
  19.     min-height: 1500px;
  20.     margin: 10px auto;
  21.   background-color: blue;
  22.     /* 相对定位 */
  23.    position: relative; 
  24.     top: 50px;
  25.   }
  27.   body header{
  28.     position: fixed;
  29.     right: 0;
  30.     left: 0;
  31.     top: 0;
  32.     /* 让导航栏固定在首页，不会受到主体挡住 */
  33.     z-index: 100;
  34.   }
  35.   body .wrap .left,
  36.   body .wrap .right,
  37.   body .wrap .content{
  38.     background-color: olive;
  39. min-width: 200px;
  40. /* 继承父级高度 */
  41. min-height: inherit;
  42. position: absolute;  
  43. }
  45. body .wrap .left{
  46.     top:0;
  47.     left: 0;
  48. }
  50. body .wrap .right{
  51.     top:0;
  52.     right:  0;
  53. }
  54. body .wrap .content{
  55.   top: 0;
  56.     left: calc(200px + 10px);
  57.     right: calc(200px + 10px);
  58.     margin: 0 auto ;
  60. }
  62. body  footer{
  63.     position: fixed;
  64.     left: 0;
  65.     right: 0;
  66.     bottom: 0;
  67. }

剩余空间的分配

  1. @import '../css/reset.css';
  4. /* 页眉页脚 */
  5. /* body header,
  6. body footer{ 
  7.     background-color: aqua;
  8.     height: 50px;
  9. } */
  11. body header,
  12. body footer {
  13.   height: 50px;
  14.   background-color: lightgreen;
  15. }
  17. body{
  18.     display: flex;
  19.     /* flex-direction: column; */
  20.     /* flex-direction: row;  =flex-flow */
  21.        /* flex-flow: column; */
  22.        flex-flow: nowrap;
  23.        flex-flow: column;
  24.        flex-flow: nowrap;
  25.        /* flex-flow: column nowrap; */
  26. }
  28. body .wrap{
  29.     margin: 10px auto;
  30.     width: 1000px;
  31.     min-width: 200px;
  32.     display: flex;
  35.     place-content: space-between;
  36.    min-height: 200px;
  37.   /* width: 1000px;
  38.   min-width: 600px;
  39.   display: flex;
  40.   place-content: space-between;
  41.   min-height: 1500px; */
  43. }

项目间的主轴平均分配

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=ww, initial-scale=1.0">
  7.     <title>flex 布局术语、容器、项目（子元素）</title>
  8. <style>
  9. * {
  10.     margin: 0;
  11.     padding: 0;
  12.     box-sizing: border-box;
  13.     border: 2px  solid yellow;  
  15. }
  16. .contatiner{
  17.     /* flex 弹性盒子  从垂直排列改为水平排列主轴排列
  19.         block 块级盒子
  20.     inline  内联盒子
  21.     */
  22.     display: flex;
  24.     background-color: aquamarine;
  26.     border: 2px    solid red ;  
  28. }
  29. .contatiner > .item {
  30.     background-color: hotpink;
  31.     width: 50px;
  32.     border: 1px solid olive;
  34. }
  36. .contatiner {
  38.     /* 主轴方向  默认是行排版，支持列排版 column */
  39.     flex-direction: row;
  41.     /* 项目在主轴排列是否允许换行，默认是不换行的 nowrap
  42.     不允许自动放到、缩小
  43.      */
  44.      /* flex-wrap: wrap; */
  45.         flex-wrap: nowrap;
  46.      /* 简写  */
  47.      /* flex-flow:  =flex-wrap   flex-direction;
  48.      默认值  row   nowrap
  49.      */
  50.      /* flex-flow: column;
  51.      flex-flow: row; */
  52.      /* flex-flow: row-reverse; */
  53.      /* flex-flow: row wrap; */
  54.      flex-flow: row nowrap;
  55. /* 剩余空间的分配 左右分 左边  start     右边end*/
  56.      place-content: start;
  57.      place-content: end;
  58.      /*剩余空间在 左右  两边平均分配 */
  59.      place-content: center;
  60.      /* 剩余空间在所有项目(子集)间分配 ,左右两边不分配*/
  61.      place-content: space-between;
  63.     /* 剩余空间在所有项目(子集)间分配 ,左右两边分配\分散对齐*/
  64.     place-content: space-around;
  65.  /* 剩余空间在所有项目(子集)间分配 ,左右两边分配\分散对齐 
  66.  两边相同 平均分配*/
  67.     place-content: space-evenly;
  68. }
  74. </style>
  76. </head>
  77. <body>
  78.     <div class="contatiner">
  79.      <div class="item">item1</div>
  80.      <div class="item">item2</div>
  81.      <div class="item">item3</div>
  84.     </div>
  85. </body>
  86. </html>

![](https://img.php.cn/upload/image/771/526/448/1657688273994704.jpg)

![![](https://img.php.cn/upload/image/359/180/962/1657688308897611.jpg)](https://img.php.cn/upload/image/217/202/192/1657688301543510.jpg)

项目在交叉轴上的对齐

  2. /* place-items:    交叉轴对齐; 
  4. */
  5. /* 默认值，自动伸展 */
  6. /* height: 5em;  */
  7. /* place-items: stretch; */
  8. /* 上对其start  下对齐end */
  9. place-items: start;

项目在页面的布局，响应或者不响应

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>flex 项目子集上的常用属性</title>
  10.     <style>
  12. * {
  13.     margin: 0;
  14.     padding: 0;
  15.     box-sizing: border-box;
  16.     border: 2px  solid yellow;  
  18. }
  19. .contatiner{
  20.     /* flex 弹性盒子  从垂直排列改为水平排列主轴排列
  22.         block 块级盒子
  23.     inline  内联盒子
  24.     */
  25.     height: 10em;
  26.     display: flex;
  28.     background-color: aquamarine;
  30.     border: 2px    solid red ;  
  32. }
  33. .contatiner > .item {
  34.     background-color: hotpink;
  35.     width: 5em;
  36.     border: 1px solid olive;
  37.  min-width: 8em;
  38. /* flex  放大因子、收缩因子 计算宽度  */
  40. /* 因为宽度设置值，所以auto引用父级 */
  41. /* flex:0 1 auto; m默认值 */
  42. /* flex:0 1 auto; */
  44. /* flex:0 1 7em; */
  45. /* min-width > flex.width> item.width */
  46.  flex:inherit;
  48.  /* flex:1 1 auto;浏览器自动计算大小
  49.  完全响应式flex:1 1 auto;  =flex :auto
  50.  */
  51. flex:1 1 auto;
  54. /* pc失去响应，禁止放大缩小 flex: 0 0 auto;   =flex :none*/
  55. flex: 0 0 auto;
  57. }
  62.     </style>
  63. </head>
  64. <body>
  67.     <body>
  68.         <div class="contatiner">
  69.          <div class="item">item1</div>
  70.          <div class="item">item2</div>
  71.          <div class="item">item3</div>
  74.         </div>
  75. </body>
  76. </html>

项目子集排列顺序

  1. /* 改变项目、子集展示顺序  order  默认值是1 
  2. 越小越靠前*/
  3. .contatiner > .item:first-of-type{
  4. background-color: brown;
  5. order: 2;
  7. }
  8. .contatiner > .item:last-of-type{
  9. background-color: blue;
  10. order: 5;
  12. }

Correcting teacher：PHPzPHPz

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 with News 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！