Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示flex常用的6个属性
Blogger Information
Blog 14
fans 2
comment 2
visits 6660
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个属性
西门瑶雪
Original
479 people have browsed it

实例演示flex常用的6个属性

概述

  1. place：位置
  2. content：内容
  3. place-content：内容位置
  4. 属性有：start、end、center、space-between、space-around、space-evenly
  5. start、end、center：这三个可以开着是内容开始的地方
  6. start：主轴开始的地方
  7. end：主轴结束的地方
  8. center：主轴中间位置
  9. space-between、space-around、space-evenly这三个可以看成剩余空间分配的地方
  10. **容器上的元素：**
  11. 转成flex容器display：flex；
  12. 容器内的项目在剩余空间的位置place-content:start、end、center、space-between、space-around、space-evenly
  13. 容器内的项目在主轴的显示方向flex-direction：row，column；
  14. 容器内的项目是否允许换行flex-wrap：wrap/nowrap
  15. 控制容器内的项目所在位置place-items：start，end，center
  16. **项目上的元素：**
  17. flex（控制项目自适应，放大，缩小，宽度），order（控制项目排序），place-self（控制项目自身）

1、flex的排列属性：row 和 column


css样式演示

  1. body .sap{
  2.     display: flex;
  3.     width: 800px;
  4.     height: 500px;
  5.     background-color: rgb(214, 132, 132);
  6.     place-content: center;
  7.     flex-direction: row;
  8.     flex-direction: column;
  9. }
  11. body .sap .item{
  12.     width: 50px;
  13.     height: 100px;
  14.     background-color: blueviolet;
  15.     color: aliceblue;
  16.     margin: 0 10px;
  18. }

2、flex-wrap换行属性，默认nowrap不换行，换行wrap


  1. .sap{
  2.     display: flex;
  3. background: #000;
  4. flex-direction: column;
  5. flex-direction: row;
  6. flex-direction: ;
  7. flex-wrap: wrap;
  8. flex-flow: row nowrap;
  9. flex-flow: row wrap;
  10. }

3、place-content空间分配

  1. /*居中分配*/
  2. place-content: center;
  3. /*左侧分配*/
  4. place-content: start;
  5. /*右侧分配*/
  6. place-content: flex-end;
  7. /*两端分配*/
  8. place-content:space-between;
  9. /*分散分配*/
  10. place-content:space-around;
  11. /*平均分配*/
  12. place-content:space-evenly;

html显示

  1. <!DOCTYPE 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>Flex容器布局策略与思路及其属性验证</title>
  8. </head>
  9. <body>
  10. <div class="nav">
  11.     <a href="">内容悬浮1</a>
  12.     <a href="">内容悬浮2</a>
  13.     <a href="">内容悬浮3</a>
  14.     <a href="">内容悬浮4</a>
  15. </div>
  16. <style>
  17. *{
  18.     margin: 0;
  19.     padding: 0;
  20.     box-sizing: border-box;
  21. }
  22. body .nav{
  23.     height: 300px;
  24.     background-color: aquamarine;
  25.     display: flex;
  26.     flex-direction: column;
  27.     flex-direction: row;
  28.     place-content: center;
  29.     place-content: space-between;
  30.     place-content: space-around;
  31.     place-content: space-evenly;
  32.     place-content: end;
  33. }
  34. .nav > a{
  35.     width: 100px;
  36.     background-color: blueviolet;
  37.     border: 1px solid #f00;
  38.     flex: 0 0 auto;
  39.     place-items: center;
  40.     place-items: flex-end; 
  41.     flex: auto;
  42.     flex: 0 1 auto;
  43.     flex: 1 1 auto;
  44.     flex: 0 0 120px;
  45. }
  46. .nav > a:nth-of-type(1){
  47.     order: 3;
  48.     place-self: flex-end;
  49. }
  51. </style>
  52. </body>
  53. </html>
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