弹性盒模型的布局方式

最新推荐文章于 2023-04-22 20:17:17 发布

dengyi0317

最新推荐文章于 2023-04-22 20:17:17 发布

阅读量172

点赞数

原文链接：http://www.cnblogs.com/xiaogao6681/p/7596689.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
width: 800px;
height: 600px;
margin: 100px auto;
background: tomato;

display: flex;
flex-direction: row;
flex-wrap: wrap;
/*下面这一项是上面2项的总结*/
flex-flow: row wrap;

justify-content: space-between;
/*
justify-content属性定义了项目在主轴上的对齐方式。
flex-start（默认值）左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等。
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/

align-items: stretch;
/*align-items属性定义项目在交叉轴上如何对齐。
flex-start 交叉轴的起点对齐。
flex-end 交叉轴的终点对齐。
center 交叉轴的中点对齐。
baseline 项目的第一行文字的基线对齐。
stretch（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。*/

align-content: space-between;
/* 定义了交叉轴上面的空白应该如何分配
flex-start 与交叉轴的起点对齐。
flex-end 与交叉轴的终点对齐。
center 与交叉轴的中点对齐。
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）轴线占满整个交叉轴。*/

}

.item {
width: 200px;
height: 200px;
background: green;
font-size: 60px;
text-align: center;
border: blueviolet 1px solid;
/*flex-grow: 指定子元素增长的方式，默认为0 。不指定则不进行增长；
flex-shrink:指定子元素缩小的方式，默认为1;
*/
align-self: auto;
/*指定侧轴的对齐方向 auto表示继承父级的align-items
flex-start:侧轴的起始边界
flex-end:纵轴紧靠该结尾边界;
center：居中对齐
baseline:基线对齐
stretch：采取拉升对齐的方式;
*/

}
</style>
</head>
<body>
<div class="container">

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>


</div>
</body>
</html>