博客列表 >flex布局常用属性

flex布局常用属性

无名小辈
无名小辈原创
2022年07月23日 23:23:30798浏览

flex容器上必知的3个属性

flex-flow:主轴,换行
place-content:剩余空间分配方式
place-items:交叉轴对齐方式

flex项目上必知3个属性

flex 项目缩放与宽度
order 主轴排列顺序
place-self 项目在交叉轴上的对齐方式

  1. <div class="container">
  2. <div class="item">item1(项目:就是flex容器的子元素)</div>
  3. <div class="item">item2(项目:就是flex容器的子元素)</div>
  4. <div class="item">item3(项目:就是flex容器的子元素)</div>
  5. </div>
  6. .container{
  7. /* 转为弹性盒子 */
  8. display: flex;
  9. height: 20em;
  10. border: 1px solid #232323;
  11. }
  12. .container > .item{
  13. display: flex;
  14. /* width: 10em;
  15. min-width: 15em; */
  16. padding: 1em;
  17. background-color:aliceblue;
  18. /* 第一个属性 flex */
  19. /* flex:放大因子 收缩因子 项目宽度 */
  20. flex: 0 1 auto; /* 等价于 */ flex: initial;
  21. /*
  22. 宽度优先级
  23. min-width > flex.width > width
  24. */
  25. /* 完全响应式:允许放大,允许缩小,宽度自动 */
  26. flex: 1 1 auto; /* 等价于 */ flex: auto; /* 缩写方式,后两位取默认值 */ flex:1;
  27. /* PC布局,完全失去响应,禁止放大和缩小 */
  28. flex: 0 0 auto; /* 等价于 */ flex: none;
  29. }
  30. /* 改动项目在主轴上的排列顺序:order 从小到大排列*/
  31. /* 默认值:order:0; */
  32. .container > .item:first-of-type{
  33. background-color: blueviolet;
  34. order: 3;
  35. }
  36. .container > .item:nth-of-type(2){
  37. background-color: lightcyan;
  38. order: 1;
  39. place-self: center;
  40. }
  41. .container > .item:nth-of-type(3){
  42. background-color: lightgoldenrodyellow;
  43. order: 2;
  44. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议