博客列表 >第五课 定位与flex,grid。

第五课 定位与flex,grid。

清风King
清风King原创
2021年10月18日 15:24:12401浏览

一.Flex布局

  1. html代码
  2. <div class="flex-containter">
  3. <div class="item">item1</div>
  4. <div class="item">item2</div>
  5. <div class="item">item3</div>
  6. </div>

1.Flex容器中的属性

  1. css代码
  2. .flex-containter{
  3. /* 使用flex布局 */
  4. display: flex;
  5. height: 20em;
  6. border: 1px solid violet;
  7. /* 控制flex项目能否换行:warp能换行,nowarp不能换行 */
  8. flex-wrap:nowrap;
  9. /* 控制flex项目排列方式:row行排列,column列排列。 */
  10. flex-direction:row;
  11. /* flex-warp和flex-direction合并简写 */
  12. flex-flow:row nowrap ;
  13. /* place-content用于控制flex的剩余空间:end终止边,start开始边,center居中。在项目两边进行分配*/
  14. place-content: center;
  15. /* 在剩余空间在每个项目之间进行分配 */
  16. place-content: space-between;
  17. /* 剩余空间围绕每个项目两边平均分配*/
  18. place-content: space-around;
  19. /* place-items交叉轴上的排列 */
  20. place-items: start;
  21. place-items: end;
  22. place-items: center;
  23. }
  24. .item{
  25. border: 1px solid green;
  26. width: 20em;
  27. background-color: lightblue;
  28. }
  29. </style>

2、Flex项目中的属性

  1. CSS代码
  2. .item{
  3. border: 1px solid green;
  4. width: 20em;
  5. background-color: lightblue;
  6. /* flex-grow是否放大;flex-shrink是否能缩小;flex-basis项目在主轴上的宽度,auto为自动; */
  7. /* 简写用flex:flex-grow flex-shrink flex-basis */
  8. /* flex:0 1 auto; flex项目不允许放大,只允许缩小,宽度自动适配 */
  9. /* flex项目放大缩小自动响应。同flex:1 1 auto */
  10. flex:auto;
  11. /* flex项目不能自动响应。同flex:0 0 auto */
  12. flex:none;
  13. }
  14. /* 改变flex项目的顺序,用order */
  15. .item:first-of-type {
  16. order: 3;
  17. }

二、grid布局

  1. html代码
  2. </style>
  3. <div class="grid-containter">
  4. <div class="grid-item">item1</div>
  5. <div class="grid-item">item2</div>
  6. <div class="grid-item">item3</div>
  7. <div class="grid-item">item4</div>
  8. <div class="grid-item">item5</div>
  9. <div class="grid-item">item6</div>
  10. <div class="grid-item">item7</div>
  11. <div class="grid-item">item8</div>
  12. <div class="grid-item">item9</div>
  13. </div>

1、grid容器中的属性

  1. css代码
  2. <style>
  3. .grid-containter{
  4. display: grid;
  5. width:40em;
  6. height: 40em;
  7. /* 把项目放入3行3列的网格中 */
  8. grid-template-columns: 10em 10em 10em;
  9. grid-template-rows: 10em 10em 10em;
  10. /* 第二种写法,把项目放入2行3列网格中 */
  11. grid-template-columns: repeat(3,20em);
  12. grid-template-rows: repeat(2,20em);
  13. /* 第三总写法,用新单位fr */
  14. grid-template-columns: repeat(3,1fr);
  15. grid-template-rows: repeat(3,1fr);
  16. /* 剩余空间在项目中的分配 */
  17. place-content: center center;
  18. /* 控制项目内容在网格中的排列,用place-item */
  19. place-items:start end;/*place-items:竖向 横向 ; */
  20. place-items: center;
  21. }
  22. .grid-item{
  23. background-color: violet;
  24. height:5em;
  25. width:5em;
  26. /* 控制项目内容在网格中的排列,用place-item */
  27. /* place-items:start end;place-items:竖向 横向 ; */
  28. /* place-items: center; */
  29. }

.grid项目中的属性

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议