Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex 项目属性演示
Blogger Information
Blog 27
fans 0
comment 0
visits 19018
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 项目属性演示
茂林
Original
864 people have browsed it

Flex 项目属性示例

  1. flex: 项目在”主轴”上的缩放比例与宽度
  2. place-self 某项目在”交叉轴”上的排列方式
  3. order: 项目在”主轴”上的排列顺序

1. flex: 项目在”主轴”上的缩放比例与宽度

设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间，有三个值

第1：放大比例，默认不放大 ，用0代表， 放大用1代表
第2：允许收缩 默认允许自动收缩 用1 代表， 不允许自动收缩 用 0代表
第3：主轴的空间（宽度） auto 表示
默认值：不放大 ，允许收缩 ， 自动分配
常用的用法 flex:1 ;等同于flex后面的2个值是默认值 flex：auto ;

1.1 flex：0 1 auto 语法糖 flex:initial 

  1.  <body>
  2.     <ul class="container">
  3.       <li class="items">item1</li>
  4.       <li class="items">item2</li>
  5.       <li class="items">item3</li>
  6.     </ul>
  7.   </body>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.     ul {
  15.       width: 450px;
  16.       height: 100px;
  17.     }
  18.     ul li {
  19.       background-color: lightgreen;
  20.       border: 1px solid black;
  21.       list-style: none;
  22.       /* height: 50px; */
  23.     }
  24.     .container {
  25.       display: flex;
  27.       flex-flow: row nowrap;
  28.     }
  29.     .container > .items {
  30.       width: 150px;
  31.       width: 250px; 
  33.       /* flex属性 有三值
  34.       1,放大比例 0代表不放大,1代表可放大,默认不放大
  35.       2,允许收缩 0代表不收缩 ,1代表允许收缩,默认允许收缩
  36.       3,主轴空间(宽度)  auto代表自动分配 
  37.     */
  38.       flex: 0 1 auto;  /* 默认是不放大，但可以自动收缩 */
  39.     /*语法糖 */
  40.     /*flex:initial; */
  41.     }
  42.   </style>

1.2 flex：1 1 auto 语法糖 flex:auto

允许放大，允许收缩 完全响应式

  1.   <body>
  2.     <ul class="container">
  3.       <li class="items">item1</li>
  4.       <li class="items">item2</li>
  5.       <li class="items">item3</li>
  6.     </ul>
  7.   </body>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.     .container {
  15.       /*  width: 450px;*/
  16.       height: 100px;
  17.     }
  18.     ul li {
  19.       background-color: lightgreen;
  20.       border: 1px solid black;
  21.       list-style: none;
  22.       /* height: 50px; */
  23.     }
  24.     .container {
  25.       display: flex;
  27.       flex-flow: row nowrap;
  28.     }
  29.     .container > .items {
  30.       /*   width: 150px; */
  31.       /*   width: 250px; */
  33.       /* flex属性 有三值
  34.       1,放大比例 0代表不放大,1代表可放大,默认不放大
  35.       2,允许收缩 0代表不收缩 ,1代表允许收缩,默认允许收缩
  36.       3,主轴空间(宽度)  auto代表自动分配,分配的宽度有效
  37.     */
  39.       /* 2. 完全响应式,允许放大和自动收缩 */
  40.       flex: 1 1 auto;
  41.       /* 语法糖  */
  42.       /* flex: auto; */
  43.     }
  44.   </style>

1.3flex：0 0 auto 语法糖 flex:none

不允许放大，也不允许收缩，失去了响应式，一般在电脑上浏览的页面使用

  1.   <body>
  2.     <ul class="container">
  3.       <li class="items">item1</li>
  4.       <li class="items">item2</li>
  5.       <li class="items">item3</li>
  6.     </ul>
  7.   </body>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.     .container {
  15.       /*  width: 450px;*/
  16.       height: 100px;
  17.     }
  18.     ul li {
  19.       background-color: lightgreen;
  20.       border: 1px solid black;
  21.       list-style: none;
  22.       /* height: 50px; */
  23.     }
  24.     .container {
  25.       display: flex;
  27.       flex-flow: row nowrap;
  28.     }
  29.     .container > .items {
  30.       /*   width: 150px; */
  31.       /*   width: 250px; */
  33.       /* flex属性 有三值
  34.       1,放大比例 0代表不放大,1代表可放大,默认不放大
  35.       2,允许收缩 0代表不收缩 ,1代表允许收缩,默认允许收缩
  36.       3,主轴空间(宽度)  auto代表自动分配,分配的宽度有效
  37.     */
  39.       /* 3. 无响应式,允许放大和自动收缩 */
  40.       flex: 1 1 auto;
  41.       /* 语法糖  */
  42.       /* flex: auto; */
  43.     }
  44.   </style>

1.4 常用的用法 flex:1 ;等同于flex后面的2个值是默认值 flex：auto ;

第1值：是一个比例值，意思是将按照flex所有项目按比例划分，如值项目属性的值为1，就是按照项目容器的总宽度中每个项目的宽度一样。除了设置一样的比例，也能够设置不一样的比例。

  1.  <body>
  2.     <ul class="container">
  3.       <li class="items">item1</li>
  4.       <li class="items">item2</li>
  5.       <li class="items">item3</li>
  6.     </ul>
  7.   </body>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.     .container {
  15.       /*  width: 450px; */
  16.       height: 100px;
  17.     }
  18.     ul li {
  19.       background-color: lightgreen;
  20.       border: 1px solid black;
  21.       list-style: none;
  22.       /* height: 50px; */
  23.     }
  24.     .container {
  25.       display: flex;
  27.       flex-flow: row nowrap;
  28.     }
  29.     .container > .items:first-child,
  30.     .container > .items:last-child {
  31.       background-color: yellow;
  32.       flex: 1;
  33.     }
  34.     .container > .items:first-child + * {
  35.       flex: 3;
  36.     }
  37.   </style>

flex项目按比例分配容器空间

2. place-self 某项目在”交叉轴”上的排列方式

flex允许设置其中的项目在交叉轴的排列方式

  1. <body>
  2.     <ul class="container">
  3.       <li class="items">item1</li>
  4.       <li class="items">item2</li>
  5.       <li class="items">item3</li>
  6.     </ul>
  7.   </body>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.     .container {
  15.       /*  width: 450px; */
  16.       height: 100px;
  17.     }
  18.     ul li {
  19.       background-color: lightgreen;
  20.       border: 1px solid black;
  21.       list-style: none;
  22.       /* height: 50px; */
  23.     }
  24.     .container {
  25.       display: flex;
  27.       flex-flow: row nowrap;
  28.     }
  29.     .container > .items:first-child,
  30.     .container > .items:last-child {
  31.       background-color: yellow;
  32.       flex: 1;
  33.     }
  34.     .container > .items:first-child + * {
  35.       flex: 3;
  36.     }
  37.     /* place-self: center;  items2在交叉轴的排列方式：居中排列 */
  38.     .container > .items:first-child + * {
  39.       place-self: center;
  40.     }
  41.   </style>

3. order: 项目在”主轴”上的排列顺序

项目在主轴上的排列顺序按order的值排列，数字越小排列越靠前，默认都是0，数值一样，会排列项目代码输入的顺序排列。

  1.   <body>
  2.     <ul class="container">
  3.       <li class="items">item1</li>
  4.       <li class="items">item2</li>
  5.       <li class="items">item3</li>
  6.     </ul>
  7.   </body>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.     .container {
  15.       /*  width: 450px; */
  16.       height: 100px;
  17.     }
  18.     ul li {
  19.       background-color: lightgreen;
  20.       border: 1px solid black;
  21.       list-style: none;
  22.       /* height: 50px; */
  23.     }
  24.     .container {
  25.       display: flex;
  27.       flex-flow: row nowrap;
  28.     }
  29.     .container > .items:first-child,
  30.     .container > .items:last-child {
  31.       background-color: yellow;
  32.       flex: 1;
  33.     }
  34.     .container > .items:first-child + * {
  35.       flex: 3;
  36.     }
  38.     .container > .items:first-child {
  39.       order: 5;
  40.     }
  41.     .container > .items:first-child + * {
  42.       order: 7;
  43.     }
  44.     .container > .items:last-child {
  45.       order: 2;
  46.     }
  47.   </style>

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