search

博客列表 >Flex 项目属性演示

Flex 项目属性演示

茂林
茂林原创
2023年04月02日 20:11:44865浏览

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>

上一条：仿php中文网热门推荐列表下一条：fetch，async，await 的用法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多