设为首页收藏本站
联系我们切换到宽版

 找回密码
 立即注册
金黑网络»首页 › 源码编程区 › 前端教程 › html5教程 › day3,flex布局
返回列表 发新帖

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; */

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

  8.       /* 居中 */
  9.       /* justify-content: center; */

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

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

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

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

  23.       height: 300px;
  24.       border: 1px solid #000;
  25.     }

  27.     .box div {
  28.       width: 200px;
  29.       height: 100px;
  30.       background-color: pink;
  31.     }
  32.   </style>
  33. </head>
  34. <body>
  35.   <div class="box">
  36.     <div>1</div>
  37.     <div>2</div>
  38.     <div>3</div>
  39.   </div>
  40. </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; */

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

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

  12.       align-items: flex-end;

  14.       height: 300px;
  15.       border: 1px solid #000;
  16.     }

  18.     /* 第二个div，侧轴居中对齐 */
  19.     .box div:nth-child(2) {
  20.       align-self: center;
  21.     }

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


回复

举报

返回列表 发新帖

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

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

Powered by Www.Jinhei.Cn

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

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