1.伸缩盒模型属性简介:
(1) 容器默认存在两根轴:
①水平的主轴(main axis)和垂直的交叉轴(cross axis)。
②主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end。
③交叉轴的开始位置叫做cross start,结束位置叫做cross end。
④默认沿主轴排列。
⑤单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
2.justify-content:flex-start || flex-end || center || space-between || space-around
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.layout-box {
width: 600px;
height: 300px;
background-color: #f0f0f0;
/*声明一个元素为伸缩盒模型,伸缩容器
1.伸缩项目 沿主轴排列(start -> end)
2.所有的伸缩项目(子元素)与父元素等高。
3.伸缩项目自动升级为块元素。
*/
display: flex;
/*伸缩项目沿主轴对齐
默认 justify-content: flex-start; 在主轴的 start 处
*/
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
/*伸缩项目沿主轴 “均匀分布”*/
/*伸缩项目包裹剩余空间*/
justify-content: space-between;
/*剩余空间包裹伸缩项目*/
justify-content: space-around;
}
.item { }
.item1 { background-color: #f00;}
.item2 { background-color: #ff0; }
.item3 { background-color: #00f;}
.item4 { background-color: #f0f;}
</style>
</head>
<body>
<div class="layout-box">
<div class="item item1">1</div>
<div class="item item2">222</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
justify-content:flex-start:默认效果:
justify-content:flex-end
justify-content:center
justify-content:space-between
justify-content:space-around