搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

几个CSS3的flex弹性盒模型布局的简单例子演示

发布时间：2023-01-04 00:22:32 来源：互联网
.
冬天，洁白的雪花慢慢地飘落下来，落到这里，飘到那里，我们仿佛置身于童话般的雪白世界。在苍茫的大海上，狂风卷集着乌云。在乌云和大海描写大海的散文之间，海燕像黑色的闪电，在高傲的飞翔。

Flexible Box(弹性盒子)能让页面的分布更合理和方便，
这是之前使用常规的布局方式所做不到的。

XML/HTML Code复制内容到剪贴板
  1. <divclass="warp">
  2. <divclass="modular">1</div>
  3. <divclass="modular">2</div>
  4. <divclass="modular">3</div>
  5. <divclass="modular">4</div>
  6. </div>

display:flex和display:box有什么区别？

前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。

CSS Code复制内容到剪贴板
  1. /*父级*/
  2. .warp{
  3. width:100%;
  4. height:100px;
  5. /*这个是用来定义伸缩容器，是内联还是块取决于设置的值。*/
  6. /*这个时候，他的所有子元素将变成flex文档流，称为伸缩项目。*/
  7. /*-------------------------------------------------------------*/
  8. display:-webkit-box;/*Chrome4+,Safari3.1,iOSSafari3.2+*/
  9. display:-moz-box;/*Firefox17-*/
  10. display:-webkit-flex;/*Chrome21+,Safari6.1+,iOSSafari7+,Opera15/16*/
  11. display:-moz-flex;/*Firefox18+*/
  12. display:-ms-flexbox;/*IE10*/
  13. display:flex;/*Chrome29+,Firefox22+,IE11+,Opera12.1/17/18,Android4.4+*/
  14. /*-------------------------------------------------------------*/
  15. /*一起使用box-align和box-pack属性，对子元素进行居中*/
  16. -webkit-box-pack:justify;
  17. -webkit-box-align:ustify;
  18. -moz-box-pack:justify;
  19. -moz-box-align:justify;
  20. box-pack:justify;
  21. box-align:justify;
  22. /*-------------------------------------------------------------*/
  23. /*定义了伸缩项目放置在伸缩容器的方向*/
  24. flex-direction:row;
  25. -webkit-flex-direction:row;
  26. /*定义伸缩容器里是单行还是多行显示*/
  27. flex-wrap:nowrap;
  28. /*flex-direction”和“flex-wrap”属性的缩写版本,默认rownowrap*/
  29. flex-flow:rownowrap;
  30. /*设置伸缩容器在横向方向上的对齐方式。*/
  31. justify-content:center;
  32. /*设置伸缩容器在纵向方向上的对齐方式。*/
  33. align-items:center;
  34. /*当伸缩容器的纵向还有多余空间时，可以用来调准伸缩容器横向在伸缩容器里的对齐方式*/
  35. align-content:center;
  36. }
  37. /*子级*/
  38. .warp.modular{
  39. width:80px;
  40. height:80px;
  41. background-color:#eee;
  42. text-align:center;
  43. /*设置伸缩项目出現的順序。*/
  44. order:-1;
  45. /*设置伸缩项目扩展的比例。*/
  46. flex-grow:1;
  47. /*设置伸缩项目收缩的比例。*/
  48. flex-shrink:2;
  49. /*设置伸缩项目的伸缩基准值。*/
  50. flex-basis:auto;
  51. /*flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写*/
  52. flex:12100px;
  53. /*用来在单独的伸缩项目上覆写默认的对齐方式。*/
  54. align-self:center;
  55. }

直接上代码，写了个Demo便于理解,其中warp为父元素，称为“伸缩容器，modular为子元素，称为“伸缩项目”。

1) Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。

2) 目前没有浏览器支持 box-flex 属性，Firefox 支持替代的 -moz-box-flex 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

3) CSS的columns在伸缩容器上没有效果。

4) float、clear和vertical-align在伸缩项目上没有效果。

例：移动端导航（居中，左右，自适应居中，自适应竖向排列）

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. .nav{
  3. background:#00BFFF;
  4. display:-webkit-box;
  5. display:-moz-box;
  6. display:-ms-flexbox;
  7. display:-webkit-flex;
  8. display:flex;
  9. -webkit-flex-flow:rowwrap;
  10. /*自适应竖向排列*/
  11. -webkit-flex-flow:columnwrap;
  12. /*所有列面向主轴起始位置靠齐*/
  13. justify-content:flex-start;
  14. /*所有列面向主轴终点位置靠齐*/
  15. justify-content:flex-end;
  16. }
  17. .nava{
  18. text-decoration:none;
  19. display:block;
  20. padding:1em;
  21. color:#fff;
  22. /*居中平铺*/
  23. flex:1;
  24. }
  25. @mediaalland(max-width:800px){
  26. .nav{
  27. /*所有列面向主轴两端位置平均分配*/
  28. justify-content:space-around;
  29. }
  30. }
  31. </style>
XML/HTML Code复制内容到剪贴板
  1. <ulclass="nav">
  2. <li><arel="nofollow noopener noreferrer" href="#">1</a></li>
  3. <li><arel="nofollow noopener noreferrer" href="#">2</a></li>
  4. <li><arel="nofollow noopener noreferrer" href="#">3</a></li>
  5. <li><arel="nofollow noopener noreferrer" href="#">4</a></li>
  6. </ul>

例：移动端常用自适应布局

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. .wrapper{
  3. display:-webkit-box;
  4. display:-moz-box;
  5. display:-ms-flexbox;
  6. display:-webkit-flex;
  7. display:flex;
  8. -webkit-flex-flow:rowwrap;
  9. flex-flow:rowwrap;
  10. }
  11. .wrapper>*{
  12. padding:10px;
  13. flex:1100%;
  14. }
  15. .header{
  16. background:#FF6347;
  17. }
  18. .footer{
  19. background:#90EE90;
  20. }
  21. .main{
  22. background:#00BFFF;
  23. }
  24. .aside-1{
  25. background:#FFD700;
  26. }
  27. .aside-2{
  28. background:#FF69B4;
  29. }
  30. @mediaalland(min-width:600px){
  31. .aside{
  32. flex:1auto;
  33. }
  34. }
  35. @mediaalland(min-width:800px){
  36. .main{
  37. flex:30px;
  38. }
  39. .aside-1{
  40. order:1;
  41. }
  42. .main{
  43. order:2;
  44. }
  45. .aside-2{
  46. order:3;
  47. }
  48. .footer{
  49. order:4;
  50. }
  51. }
  52. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="wrapper">
  2. <headerclass="header">顶部</header>
  3. <articleclass="main">
  4. <p>我在中间显示的文字</p>
  5. </article>
  6. <asideclass="asideaside-1">我在左边显示的文字</aside>
  7. <asideclass="asideaside-2">我在右边显示的文字</aside>
  8. <footerclass="footer">底部</footer>
  9. </div>

本文几个CSS3的flex弹性盒模型布局的简单例子演示到此结束。丰富的过每一天，快乐的看每一天。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:
标签： flex
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图