search

博客列表 >flex布局术语、容器、项目及案例

flex布局术语、容器、项目及案例

OC的PHP大牛之路
OC的PHP大牛之路原创
2022年07月14日 18:00:04681浏览

flex布局术语、容器、项目

主轴：元素排列
交叉轴：元素对齐
container可以用作其它元素的容器（块级盒子）
display:flex转为弹性盒子

容器属性：

1.flex-flow主轴方向是否换行
flex-flow：row nowrap主轴方向不允许换行
flex-flow:row wrap主轴方向允许换行

2.place-content容器中的剩余空间在项目中如何分配
2.1将所有项目看成一个整体，剩余空间在项目两边分配
place-content:start将所有剩余空间全部分到右边，所有项目从左边排列
place-content:end将所有剩余空间全部分到左边，所有项目从右边排列
place-content:center将所有剩余空间在项目中左右两边平均分配

2.2将所有项目看成一个独立的个体，剩余空间在项目之间分配
place-content:space-between两端对齐
place-content:space-around分散对齐
place-content:space-evenly平均对齐

3.place-items交叉轴上的对齐
place-items：stretch自动伸展
place-items:start上对齐
place-items:end下对齐

项目属性

1.flex(放大因子 收缩因子 计算宽度)
flex:0 1 auto(flex:initial)默认值
如果flex中自定义width,则flex.width>item.width
如果item设置了min-widtn,则min-width>flex.width>item.width

完全响应式：允许放大 允许缩小 宽度自动
flex:1 1 auto(flex:auto)
flex:1=flewx:1 1 auto(如果省去2，3值，则取默认值)

PC布局：完全失去响应，禁止放大和缩小
flex:0 0 auto(flex:none)

2.order改动项目在主轴上的排列顺序
order：0（默认值），值越小越靠前，支持负数

3.place-self控制某一个项目的对齐方式

案例：

  1. <body>
  2.     <div class="container">
  3.         <div class="item">item1</div>
  4.         <div class="item">item2</div>
  5.         <div class="item">item3</div>
  6.     </div>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container{
  16.           display: flex;
  17.           height: 20em;
  18.           border: 1px solid black ;
  19.         }
  21.         .container>.item{
  22.             width: 10em;
  23.             padding: 1em;
  24.             background-color: aqua;
  25.             border: 1px solid black;
  26.         }
  28.         .container{
  29.             flex-flow:row nowrap
  30.         }
  31.     </style>
  32. </body>

1.flex-flow属性

  1. .container{
  2.             flex-flow:row nowrap
  3.         }

  1. .container{
  2.     flex-flow:row wrap
  3. }

2.place-content属性

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content:start;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: end;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: center;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: space-between;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: space-around;
  4. }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-content: space-evenly;
  4. }

3.place-items属性

  1.  .container{
  2.      flex-flow:row nowrap;
  3.      place-items:stretch;
  4.  }

  1. .container{
  2.     flex-flow:row nowrap;
  3.     place-items:start;
  4. }

  1.  .container{
  2.      flex-flow:row nowrap;
  3.      place-items:end;
  4.  }

4.flex属性

  1. .container>.item{
  2.     /* width: 10em; */
  3.     padding: 1em;
  4.     background-color: aqua;
  5.     border: 1px solid black;
  6.     flex:auto;
  7. }

5.order属性

  1.  .container>.item:first-of-type{
  2.      background-color: blue;
  3.      order: 2;
  4.  }

6.place-self属性

  1. .container>.item:first-of-type{
  2.     background-color: blue;
  3.     order: 2;
  4.     place-self: start;
  5. }

上一条：CSS Position定位元素分析下一条：flex常用的6个属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多