flex布局 项目属性

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>flex布局 项目属性</title>

<link href="css/k.css" rel="stylesheet" />

</head>

<body>

<div class="bigbox">

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="box4"></div>

<div class="box5"></div>

</div>

</body>

</html>

css

*{

margin: 0;

padding:0;

}

.bigbox{

width: 1200рx;

height: 800рх;

border: 1px solid red;

margin: auto;

display: flex;/*flex容器**/

/*justify-content: space-between;*/

}

.bigbox div{

width: 200px;

height: 300рх;

border: 1px solid firebrick;

font-size: 32px;

text-align: center;

line-height: 300рх;

flex-grow:1 ;

flex-shrink: 0;

}

.bigbox .box3{

/*给项目顺序:值越小越靠前,取整数,默认值为0,可以为负数*/

order: -1;

/*

项目存在剩余空间时的放大比例:

0:默认值,不放大

1:等比例放大

n:单独一个项目设置时

*/

flex-grow: 0;

/*项目缩小比例:

默认值为1,表示平分缩小空间

0:表示不缩小

不能为负数

*/

flex-shrink: 0;

flex-basis:300px;

}

.bigbox .box1{

order:2 ;

}

.bigbox .box2{

align-self: center;

}

相关推荐
说私域16 分钟前
基于开源AI大模型AI智能名片S2B2C商城小程序源码的私域流量新生态构建
人工智能·开源
沉默媛20 分钟前
如何安装python以及jupyter notebook
开发语言·python·jupyter
HollowKnightZ22 分钟前
目标姿态估计综述:Deep Learning-Based Object Pose Estimation: A Comprehensive Survey
人工智能·深度学习
算家计算2 小时前
“28项评测23项SOTA——GLM-4.1V-9B-Thinking本地部署教程:10B级视觉语言模型的性能天花板!
人工智能·开源
Codebee2 小时前
OneCode注解驱动:智能送货单系统的AI原生实现
人工智能·低代码
Deng9452013142 小时前
基于Python的旅游数据可视化应用
python·numpy·pandas·旅游·数据可视化技术
2401_878624792 小时前
pytorch 自动微分
人工智能·pytorch·python·机器学习
胖达不服输2 小时前
「日拱一码」021 机器学习——特征工程
人工智能·python·机器学习·特征工程
Rvelamen2 小时前
大模型安全风险与防护产品综述 —— 以 Otter LLM Guard 为例
人工智能