flex：全称：Flexible Box 弹性布局
1.基础概念
1）任何一个容器都可以指定为Flex布局。
2）采用flex布局的元素，称为Flex容器 flex container
3）它的所有子元素自动成为容器成员
4）容器默认存在两根轴：水平的主轴 和 垂直的交叉轴
2.容器的属性
- flex-direction 决定主轴的方向，即容器成员排列的方向
- flex-wrap 当盒子成员过多时，如何换行
flex-wrap: nowrap | wrap | wrap-reverse; nowrap代表：不换行（默认） warp换行，第一行在上方。 warp-reverse :换行，第一行在下方。
- flex-flow : flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content:定义了项目在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around; } - align-items：定义项目在交叉轴上如何对齐。
3.样例：
#containner {
border: 5px solid rgb(101, 97, 97);
display: flex;
/* flex-direction: column; */
}
#headimg {
width: 50px;
height: 50px;
border-radius: 50%;
}
#head {
display: flex;
border: 5px solid rgb(232, 166, 166);
align-items: center; /* 垂直居中 */
justify-content: start; /* 水平居中 */
gap: 10px; /* 头像和名字之间的间隔 */
background-color: #ffffff; /* 背景颜色 */
padding: 10px; /* 内边距 */
/* border-radius: 50%; 圆角边框 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习html</title>
<link rel="stylesheet" href="/css/demo.css">
</head>
<body>
<div id="containner">
<div id="head">
<img id="headimg" src="/img/OIP-C.png" alt="">
<span>天才眼睛狗</span>
</div>
</div>
</body>
</html>
扫一扫
501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
