学习弹性布局时,发现的小细节,整理如下
说明:当父类容器使用 display:flex(弹性布局)时,子元素使用width和height设置大小,父类容器使用 justify-content:flex-start| flex-end | center | space-between | space-around 设置子元素在主轴(纵轴)方向上的对齐方式,子元素不会占满父容器的高(height)。
相反,子元素使用padding(内边距)设置大小,父类容器使用 justify-content:flex-start| flex-end | center | space-between | space-around 设置子元素在主轴(纵轴)方向上的对齐方式,子元素会占满父容器的高(height)。另 align-items值中仅 stretch值会占满父类容器的高。
代码 + 运行结果 如下:`
子元素使用width和height设置大小**,父类容器**使用 justify-content | align-items设置子元素在
主轴(纵轴)方向上的对齐方式,子元素不会占满父容器的高(height)。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性盒子布局练习</title>
<style type="text/css">
#div1 {
width: 600px;
height: 300px;
display: flex;
background: #ccc;
}
.div1,.div2,.div3 {
padding:25px;
background: red;
}
</style>
</head>
<body>
<div id="div1">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
</html>
一、 父类容器使用align-items: stretch;设置子元素在侧轴(纵轴)方向上的对齐方式。
二、父类容器使用 justify-content:center;设置子元素在主轴(纵轴)方向上的对齐方式。
三、父类容器**使用 justify-content:flex-end;设置子元素在主轴(纵轴)方向上的对齐方式。
四、父类容器**使用 justify-content:flex-start设置子元素在主轴(纵轴)方向上的对齐方式。