CSS-弹性伸缩布局(新版本) - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


CSS-弹性伸缩布局(新版本)

2019-7-3 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

使用新版本的弹性伸缩布局
display使用弹性伸缩盒

direction容器盒内元素的排列顺序

flex-wrap设置无法容纳时,自动换行

justify-content 伸缩项目的排列方式

align-items 处理额外空间

align-self 单独处理一个伸缩项目的额外空间

flex 控制伸缩容器的比例分配

order 设置伸缩项目出现的位置

dislpay
值:
flex 将容器盒作为块级弹性伸缩盒显示。
inline-flex:将容器盒作为内联级弹性伸缩盒显示。
实际现实中 这两个值没区别。

direction
容器盒内元素的排列顺序

值:
row:从左到右排列
row-reverse:从右到左排列
column:从上倒下排列
column-reverse从下到上排列

flex-wrap
设置无法容纳时,自动换行

值:
nowrap:不换行
wrap:自动换行
wrap-reverse:自动换行,方向和wrap相反

下图为正常排序

使用wrap-reverse后缩小浏览器时:


justify-content
伸缩项目的排列方式

值:
flex-start:伸缩项目以起始点靠齐

flex-end:伸缩项目以结尾靠齐
center:以中心点靠齐
space-between:伸缩项目平均分布
space-around:同上但两段保留一般的空间

实例:使用space-around的排列效果


align-items
处理额外空间

值:
flex-start:以顶部为基准,清理底部的额外空间
flex-end:以底部为基准,清理顶部的额外空间
center:以中间为基准,清理上下部分的额外空间
baseline:以基线为基准,清理额外的空间
stretch:伸缩项目填充整个容器,默认值

align-self
处理额外空间

值:与align-items的值一样,需要用nth-child()设置某一个需要处理的伸缩项目
flex
设置伸缩项目分配比例

p:nth-child(1)
{
   flex: 1;
}

p:nth-child(2)
{
flex: 2;
}
 p:nth-child(3)
{

flex: 2;
}
p:nth-child(4)
{
flex: 1;
}

order
设置伸缩项目出现的位置

p:nth-child(1)
{
   order:2;
}

p:nth-child(2)
{
 order:3;
}
 p:nth-child(3)
{

 order:4;
}
p:nth-child(4)
{
 order:1;
}
--------------------- 
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: CSS-弹性伸缩布局(新版本) « 如何提高用户的安全感? | 视觉层级强力拆解»


蓝蓝 http://www.bjhbys.com

  1. 2019年10月(53)
  2. 2019年9月(48)
  3. 2019年8月(63)
  4. 2019年7月(59)
  5. 2019年6月(59)
  6. 2019年5月(31)
  7. 帝皇彩票官网2019年4月(37)
  8. 2019年3月(43)
  9. 2019年2月(26)
  10. 2019年1月(45)
  11. 2018年12月(41)
  12. 2018年11月(40)
  13. 2018年10月(29)
  14. 2018年9月(40)
  15. 2018年8月(87)
  16. 2018年7月(107)
  17. 2018年6月(86)
  18. 2018年5月(110)
  19. 2018年4月(40)
  20. 2018年3月(35)
  21. 2017年8月(35)
  22. 2017年7月(45)
  23. 2017年6月(7)
  24. 2017年5月(27)
  25. 2017年4月(51)
  26. 2017年3月(70)
  27. 2017年2月(65)
  28. 2017年1月(69)
  29. 2016年12月(55)
  30. 2016年11月(111)
  31. 2016年10月(92)
  32. 帝皇彩票官网2016年9月(53)
  33. 2016年8月(9)
  34. 2016年7月(4)
  35. 2016年6月(9)
  36. 2016年3月(19)
  37. 2016年2月(26)
  38. 2016年1月(30)
  39. 2015年12月(33)
  40. 2015年11月(35)
  41. 2015年10月(46)
  42. 帝皇彩票官网2015年9月(43)
  43. 帝皇彩票官网2015年8月(40)
  44. 2015年7月(33)
  45. 2015年6月(46)
  46. 2015年5月(58)
  47. 2015年4月(70)
  48. 2015年3月(55)
  49. 2015年2月(17)
  50. 帝皇彩票官网2015年1月(33)
  51. 2014年12月(21)
  52. 帝皇彩票官网2014年11月(84)
  53. 帝皇彩票官网2014年10月(94)
  54. 2014年9月(6)
  55. 2014年8月(1)
  56. 2014年7月(13)
  57. 2014年6月(66)
  58. 帝皇彩票官网2014年5月(99)
  59. 2014年4月(88)
  60. 帝皇彩票官网2014年3月(102)
  61. 2014年2月(68)
  62. 2014年1月(83)
  63. 2013年12月(106)
  64. 帝皇彩票官网2013年11月(112)
  65. 2013年10月(61)
  66. 2013年9月(20)
  67. 2013年7月(13)
  68. 2013年6月(27)
  69. 帝皇彩票官网2013年5月(48)
  70. 帝皇彩票官网2013年4月(39)
  71. 2013年3月(8)
  72. 2013年2月(20)
  73. 2013年1月(31)
  74. 2012年12月(33)
  75. 2012年11月(31)
  76. 2012年10月(23)
  77. 2012年9月(8)
  78. 2012年7月(14)
  79. 2012年6月(15)
  80. 2012年5月(31)
  81. 2012年4月(24)
  82. 2012年2月(4)
  83. 2012年1月(8)
  84. 2011年12月(35)
  85. 2011年11月(32)
  86. 2011年10月(13)
  87. 2011年8月(1)
  88. 2011年6月(1)
订阅Rss
桔子彩票网址 帝皇彩票官网 博发彩票开户 吉利彩票开奖 大象彩票APP 迪士尼彩乐园 桔子彩票开奖 博发彩票开奖 状元彩票官网 大象彩票APP