ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

flex使用场景

2021-09-23 11:04:38  阅读:30  来源: 互联网

标签:box flex 场景 50px height width 使用 border


1.绝对居中:

.box {     display: flex;     width: 100%;     height: 500px;     background: #cccccc;     justify-content: center;//主轴居中     align-items: center; //交叉轴居中   }
  .box div {     width: 50px;     height: 50px;     background: red;     border: 2px solid #007aff;   }

2.图片展示: 图片指定宽度,不指定数量

 .box {     display: flex;     width: 100%;     height: 500px;     background: #cccccc;     justify-content: flex-start;     align-content: flex-start; /*交叉轴方向行间排列*/     align-items: flex-start;     flex-wrap: wrap; /*设置换行*/     padding: 10px;     box-sizing: border-box;   }
  .box div {     width: 50px;     height: 50px;     background: red;     border: 2px solid #007aff;     margin: 5px; /*间距*/   }

 

3.单行左右布局:

.box
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}

.box .div1
{
flex:1;
}

4.三列场景:

.box
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}

.box .div1
{
flex:1;
}

 

标签:box,flex,场景,50px,height,width,使用,border
来源: https://www.cnblogs.com/1024L/p/15323195.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有