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;

}

相关推荐
成成成成成成果1 分钟前
揭秘动态测试:软件质量的实战防线
python·功能测试·测试工具·测试用例·可用性测试
猫头虎23 分钟前
新手小白如何快速检测IP 的好坏?
网络·人工智能·网络协议·tcp/ip·开源·github·php
天天进步201542 分钟前
Python游戏开发引擎设计与实现
开发语言·python·pygame
GeeJoe44 分钟前
凡人炼丹传之 · 我让 AI 帮我训练了一个 AI
人工智能·机器学习·llm
小和尚同志1 小时前
Dify29. 为你的 Dify API 穿层衣服吧
人工智能·aigc
不会学习的小白O^O1 小时前
神经网络----卷积层(Conv2D)
人工智能·深度学习·神经网络
bastgia1 小时前
Transformer终结者?Google DeepMind新架构实现2倍推理速度和一半内存占用
人工智能·llm
努力一点9481 小时前
ubuntu22.04系统入门 linux入门(二) 简单命令 多实践以及相关文件管理命令
linux·运维·服务器·人工智能·gpu算力
数据狐(DataFox)1 小时前
CTE公用表表达式的可读性与性能优化
经验分享·python·sql