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;

}

相关推荐
weixin_470740362 分钟前
某算法的python执行汇编
汇编·python·算法
OAFD.3 分钟前
机器学习之线性回归:原理、实现与实践
人工智能·机器学习·线性回归
SHIPKING3932 小时前
【机器学习&深度学习】LMDeploy的分布式推理实现
人工智能·深度学习
mit6.8242 小时前
[RestGPT] docs | RestBench评估 | 配置与环境
人工智能·python
CareyWYR3 小时前
每周AI论文速递(250818-250822)
人工智能
门思科技3 小时前
LoRaWAN 的网络拓扑全解析:架构、原理与应用实践
服务器·网络·人工智能·科技·物联网·架构
兔子的倔强3 小时前
Transformer在文本、图像和点云数据中的应用——经典工作梳理
人工智能·深度学习·transformer
Ice__Cai4 小时前
Flask 之 Cookie & Session 详解:用户状态管理
后端·python·flask·cookie·session
lxmyzzs4 小时前
【图像算法 - 21】慧眼识虫:基于深度学习与OpenCV的农田害虫智能识别系统
人工智能·深度学习·opencv·算法·yolo·目标检测·计算机视觉
Gloria_niki4 小时前
机器学习之K 均值聚类算法
人工智能·机器学习