找回密码
 立即注册

day3,flex布局

[复制链接]
admin 发表于 2025-5-19 16:44:18 | 显示全部楼层 |阅读模式
day3,flex布局

1.jpg
1.jpg

2.jpg

3.jpg
  1. <style>
  2.     .box {
  3.       display: flex;
  4.       /* justify-content: flex-start; */

  5.       /* justify-content: flex-end; */

  6.       /* 居中 */
  7.       /* justify-content: center; */

  8.       /* 父级剩余的尺寸分配成间距 */

  9.       /* 弹性盒子之间的间距相等 */
  10.       /* justify-content: space-between; */

  11.       /* 间距出现在弹性盒子两侧 */
  12.       /* 视觉效果:弹性盒子之间的间距是两端间距的2倍 */
  13.       /* justify-content: space-around; */

  14.       /* 各个间距都相等 */
  15.       justify-content: space-evenly;

  16.       height: 300px;
  17.       border: 1px solid #000;
  18.     }

  19.     .box div {
  20.       width: 200px;
  21.       height: 100px;
  22.       background-color: pink;
  23.     }
  24.   </style>
  25. </head>
  26. <body>
  27.   <div class="box">
  28.     <div>1</div>
  29.     <div>2</div>
  30.     <div>3</div>
  31.   </div>
  32. </body>
复制代码

1.jpg

2.jpg 3.jpg 4.jpg 5.jpg 6.jpg 7.jpg


 楼主| admin 发表于 2025-5-19 20:55:24 | 显示全部楼层
侧轴对齐方式
  1. <title>flex布局-侧轴对齐方式</title>
  2.   <style>
  3.     .box {
  4.       display: flex;
  5.       /* 弹性盒子在侧轴方向没有尺寸才能拉伸 */
  6.       /* align-items: stretch; */

  7.       /* align-items: center; */

  8.       /* align-items: flex-start; */

  9.       align-items: flex-end;

  10.       height: 300px;
  11.       border: 1px solid #000;
  12.     }

  13.     /* 第二个div,侧轴居中对齐 */
  14.     .box div:nth-child(2) {
  15.       align-self: center;
  16.     }

  17.     .box div {
  18.       width: 200px;
  19.       height: 100px;
  20.       background-color: pink;
  21.     }
  22.   </style>
  23. </head>
  24. <body>
  25.   <div class="box">
  26.     <div>1</div>
  27.     <div>2</div>
  28.     <div>3</div>
  29.   </div>
  30. </body>
复制代码
1.jpg 2.jpg 3.jpg 1.jpg


QQ|网站地图|Archiver|手机版|金黑网络 ( 粤ICP备2021124338号 )

网站建设,微信公众号小程序制作,商城系统开发,高端系统定制,app软件开发,智能物联网开发,直播带货系统等

Powered by Www.Jinhei.Cn

Copyright © 2013-2024 深圳市金黑网络技术有限公司 版权所有

快速回复 返回顶部 返回列表