CSS3 flex布局和box布局详解

电玩女神 2022-05-21 09:50 413阅读 0赞

弹性盒子布局是现在十分流行的布局方式，能让我们更好地操作子元素的布局。但是要注意，元素设置为flex布局以后，子元素的float、clear、vertical-align属性会失效

flex的布局很多人都用过，但是对于box可能大多数人不了解，其实这两个都是弹性盒子的布局，各阶段的草案命名而已，用法上也是大同小异，可以根据个人习惯任选一种直接复制进flex文件，希望能够方便各位小伙伴

flex布局常用属性.

  1. .g-flex {
  2.   display: flex;
  3. }
  5. .g-flex-item {
  6.   flex: 1;
  7. }
  9. /*垂直居中*/
  10. .g-vcenter {
  11.   display: flex;
  12.   align-items: center;
  13. }
  15. /*下对齐*/
  16. .g-bottom {
  17.   display: flex;
  18.   align-items: flex-end;
  19. }
  21. /*上对齐*/
  22. .g-top {
  23.   display: flex;
  24.   align-items: flex-start;
  25. }
  27. /*水平居中*/
  28. .g-hcenter {
  29.   display: flex;
  30.   justify-content: center;
  31. }
  33. /*垂直并且水平居中*/
  34. .g-center {
  35.   display: flex;
  36.   justify-content: center;
  37.   align-items: center;
  38. }
  41. /*模块居于末尾*/
  42. .g-end {
  43.   display: flex;
  44.   justify-content: flex-end;
  45. }
  47. /*模块两端对齐*/
  48. .g-between {
  49.   display: flex;
  50.   justify-content: space-between;
  51. }
  53. /*模块两端对齐并且垂直居中*/
  54. .g-between-center {
  55.   display: flex;
  56.   justify-content: space-between;
  57.   align-items: center;
  58. }
  60. /*模块两端对齐并且上对齐*/
  61. .g-between-top {
  62.   display: flex;
  63.   justify-content: space-between;
  64.   align-items: start;
  65. }
  67. /*模块两端对齐并且下对齐*/
  68. .g-between-bottom {
  69.   display: flex;
  70.   justify-content: space-between;
  71.   align-items: flex-end;
  72. }
  74. /*弹性布局 纵向*/
  75. .g-flex-column {
  76.   flex-direction: column;
  77. }
  79. /*弹性布局 横向*/
  80. .g-flex-row {
  81.   flex-direction: row;
  82. }
  84. /*换行*/
  85. .g-flex-wrap {
  86.   flex-wrap: wrap;
  87. }
  89. /*转化成行元素*/
  90. .g-inlineblock {
  91.   display: inline-block;
  92. }
  94. /*转化成块元素*/
  95. .g-block {
  96.   display: block;
  97. }
  99. /*文字居中*/
  100. .g-text-center {
  101.   text-align: center;
  102. }
  104. /*绝对定位 垂直居中*/
  105. .g-absolute-vcenter {
  106.   position: absolute;
  107.   top: 50%;
  108.   left: 0;
  109.   transform: translateY(-50%);
  110. }
  112. /*绝对定位 水平居中*/
  113. .g-absolute-hcenter {
  114.   position: absolute;
  115.   left: 50%;
  116.   transform: translateX(-50%);
  117. }
  119. /*绝对定位 居中*/
  120. .g-absolute-center {
  121.   position: absolute;
  122.   top: 50%;
  123.   left: 50%;
  124.   transform: translate(-50%, -50%);
  125. }
  127. /*禁止用户选中*/
  128. .g-not-select {
  129.   -webkit-user-select: none;
  130. }

box布局常用属性

  1. .ub
  3. {
  5.   display: -webkit-box !important;
  7.   display: box !important;
  9.   position:relative;
  11. }
  13. .ub-rev
  15. {
  17.   -webkit-box-direction:reverse;
  19.   box-direction:reverse;
  21. }
  23. .ub-ac
  25. {
  27.   -webkit-box-align:center;
  29.   box-align:center;
  31. }
  33. .ub-ae
  35. {
  37.   -webkit-box-align:end;
  39.   box-align:end;
  41. }
  43. .ub-pc
  45. {
  47.   -webkit-box-pack:center;
  49.   box-pack:center;
  51. }
  53. .ub-pe
  55. {
  57.   -webkit-box-pack:end;
  59.   box-pack:end;
  61. }
  63. .ub-pj
  65. {
  67.   -webkit-box-pack:justify;
  69.   box-pack:justify;
  71. }
  73. .ub-ver
  75. {
  77.   -webkit-box-orient:vertical;
  79.   box-orient:vertical;
  81. }
  83. .ub-f1
  85. {
  87.   position:relative;
  89.   -webkit-box-flex: 1;
  91.   box-flex: 1;
  93. }
  95. .ub-f2
  97. {
  99.   position:relative;
  101.   -webkit-box-flex: 2;
  103.   box-flex: 2;
  105. }

发表评论

表情：
评论列表 （有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS3--Flex布局

    Flex布局 CSS2传统的盒模型采用float – position布局方式。【PC端】 CSS3的弹性盒模型采用Flex布局方式。【移动端、响应式Bootst...

    r囧r小猫r囧r小猫/ 0 赞/ 188 阅读

    相关 css3-flex布局

    第1章 flex布局 Flex布局（伸缩布局盒模型）是CSS3提出的一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。 任何一个容器都可以指定为F

    电玩女神电玩女神/ 0 赞/ 376 阅读