Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex常用的6个属性
Blogger Information
Blog 19
fans 0
comment 0
visits 10189
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个属性
搬砖来学php
Original
986 people have browsed it

1.flex常用的6个属性

一控制主轴的方向与是否换行

  1. 1.flex-direction: row; 让元素从左往右排列

  1. 2.flex-direction: column:让元素垂直主轴从上到下垂直排列

  1. flex-wrap: wrap:换行（默认是不允许换行（flex-wrap: nowrap）

place-content 容器中的剩余空间在项目之间如何进行分配

属性 声明
place-content: start 将所有剩余空间全部分到了左边,所有项目从右边开始排列
place-content: end; 将所有剩余空间在所有项目左右二边平均分配
place-content: center 将所有剩余空间在两边分配
place-content: space-between 将剩余的项目两端对齐
place-content: space-around 分散对齐
place-content: space-evenly 平均对齐

第一种方案：使用place-content: start/place-content: end将所有剩余空间全部分到了左边,所有项目从右边开始排列

使用：place-content: center | 将所有剩余空间在两边分配

方案二： place-content: space-between 将剩余的项目两端对齐

place-content: space-around | 分散对齐 |

place-content: space-evenly | 平均对齐 |

3.palce-items 项目在交叉轴上的对齐

place-items: stretch;（自动伸展）默认情况下自动伸展，当我们给box盒子添加高度的时候就会显示出来
place-items: stretch;（自动伸展）
place-items: start;（上对齐）

place-items: end;（下对齐）

  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.     <link rel="stylesheet" href="/css/dem1.css">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     *{
  12.     margin: 0;
  13.     padding: 0;
  14.     box-sizing: border-box;
  15. }
  16. .main{
  17.     height: 200px;
  18.     display: flex;  /*display属性为flex的元素即为flex容器*/
  19.     background-color: rgb(237, 243, 243);
  20. }
  21. .box{
  22.     width: 3em;
  23.     text-align: center;
  24.     line-height: 50px;
  25.     border: 1px solid black;
  26.     background-color: brown;
  27. }
  28. .main{
  29.     /* display: flex; */
  30.    /* flex-direction: row;/*让元素从左往右排列*/
  31.    /* flex-direction: column;  /*让元素垂直主轴从下到下垂直排列*/
  32.    /*换行：flex-wrap: wrap*/
  33.      /* flex-wrap: nowrap;  （默认是不允许换行） */
  34.     /* flex-wrap: wrap; */
  35.     flex-flow:  nowrap;
  36.     place-content: start;
  37.     place-content: end;  /*将所有剩余空间全部分到了左边,所有项目从右边开始排列*/
  38.     place-content: center;/*将所有剩余空间在所有项目左右二边平均分配 */
  39. /*方案二： place-content: space-between 将剩余的项目两端对*/
  40.     place-content: space-between;
  41.     /* 分散对齐 */
  42.     place-content: space-around;
  43.     /* 平均对齐 */
  44.     place-content: space-evenly;
  45.     /*自动伸展 （默认情况下自动伸展）*/
  46.     place-items: stretch;
  47.     /* 上对齐 */
  48.     place-items: start;
  49.     /* 下对齐 */
  50.     place-items: end;    
  51. }
  53. </style>
  54. <body>
  55.     <div class="main">
  56.         <div class="box">div1</div>
  57.         <div class="box">div2</div>
  58.         <div class="box">div3</div>
  59.     </div>
  60. </body>
  61. </html>

flex:的属性 flex: 0 1 auto为默认值

当flex: 1 1 auto 设置第一个值是1的时候页面会随拉伸而放大
flex: 0 1 12em;如果设置了项目宽度,所以auto直接引用了width，在flex中设置了宽度的话会优先，因为flex
当没有设置宽度的时候我们flex属性的值设为flex: 1 1 auto; 页面即可进行响应式: 允许放大,允许缩小,宽度自动

  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.     <link rel="stylesheet" href="/css/dem1.css">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     * {
  12.     margin: 0;
  13.     padding: 0;
  14.     box-sizing: border-box;
  15.   }
  17.   .container {
  18.     display: flex;
  19.     height: 20em;
  20.     border: 1px solid #000;
  21.   }
  23.   .container > .item {
  24.     /* width: 30em; */
  25.     /* min-width: 15em; */
  26.     padding: 1em;
  27.     background-color: lightcyan;
  28.     border: 1px solid #000;
  29.     flex: 0 1 auto; /*默认值*/
  30.     flex: 1 1 auto;/* 完全响应式: 允许放大,允许缩小,宽度自动 */
  31. }
  32. </style>
  33. <body>
  34.     <div class="container">
  35.         <div class="item">item1</div>
  36.         <div class="item">item2</div>
  37.         <div class="item">item3</div>
  38.       </div>
  39. </body>
  40. </html>

order: 可以改变项目在主轴上的排列顺序,值越小越靠前,支持负数

order:值越小越靠前,支持负数

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