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;

}

相关推荐
新智元11 分钟前
OpenAI去年挖的坑填上了!奖励模型首现Scaling Law,1.8B给70B巨兽上了一课
人工智能·openai
简婷1870199877520 分钟前
源网荷储 + 零碳园区:一场关于能源与未来的双向奔赴
大数据·人工智能·能源
新智元24 分钟前
Grok 4作战图刷爆全网,80%华人横扫硅谷!清华上交校友领衔,95后站C位
人工智能·openai
小宋00124 分钟前
使用LLaMA-Factory微调Qwen2.5-VL-3B 的目标检测任务-数据集格式转换(voc 转 ShareGPT)
人工智能·目标检测·计算机视觉
小哥谈39 分钟前
论文解析篇 | YOLOv12:以注意力机制为核心的实时目标检测算法
人工智能·深度学习·yolo·目标检测·机器学习·计算机视觉
mit6.82444 分钟前
[Meetily后端框架] AI摘要结构化 | `SummaryResponse`模型 | Pydantic库 | vs marshmallow库
c++·人工智能·后端
screenCui1 小时前
macOS运行python程序遇libiomp5.dylib库冲突错误解决方案
开发语言·python·macos
阿里云大数据AI技术1 小时前
Post-Training on PAI (3): 自研高性能强化学习框架PAI-ChatLearn
人工智能·开源·强化学习
二二孚日1 小时前
自用华为ICT云赛道AI第三章知识点-MindSpore特性、MindSpore开发组件
人工智能·华为
水龙吟啸1 小时前
从零开始搭建深度学习大厦系列-2.卷积神经网络基础(5-9)
人工智能·pytorch·深度学习·cnn·mxnet