实用指南：2.CSS3.(2).html

news/2025/10/27 19:12:53/文章来源:https://www.cnblogs.com/yangykaifa/p/19169904

<!DOCTYPE html>
<html>
<head>
<style>
/* CSS 盒子模型(Box Model)：
Content(内容)，Padding(内边距)，Border(边框)，Margin(外边距)
一个生活中的快递，就是如果把盒子模型看作
那么内容部分等同于你买的实物，
内边距等同于快递盒子中的泡沫，
边框等同于快递盒子，
外边距等同于两个快递盒子之间的距离 */
/* 弹性盒模型（flex box）
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
弹性容器通过设置 `display `属性的值为 `flex `将其定义为弹性容器
弹性盒子只定义了弹性子元素如何在弹性容器内布局
默认弹性盒里内容横向摆放
*/
.flex-container {
display: flex;/* 开启弹性盒，属性设置后子元素默认水平排列*/
flex-direction: column;/*flex-direction 属性指定了弹性子元素在父容器中的位置
row：横向从左到右排列（左对齐），默认的排列方式
row-reverse：反转横向排列（右对齐，从后往前排，末了一项排在最前面
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
*/
justify-content: center;/*内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
flex-start：弹性项目向行头紧挨着填充。该是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
flex-end：弹性计划向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性工程将在两个方向上同时溢出）
*/
align-items: center;/*align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
*/
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item1 {
height: 150px;
background-color: red;
flex: 1;
}
.flex-item2 {
height: 150px;
background-color: green;
flex: 2;/* flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
默认为0，即倘若存在剩余空间，也不放大
如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。
0.1即10%，1即100%，超出按100%
*/
}
.flex-item3 {
height: 150px;
background-color: blue;
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item1">flex item 1</div>
<div class="flex-item2">flex item 2</div>
<div class="flex-item3">flex item 3</div>
</div>
</body>
</html>