本文详细介绍了CSS弹性盒布局中的justify-content属性的使用方法及其不同取值的效果，并通过实例展示了如何实现水平方向上的对齐。
今天没事把css弹性盒常用及要注意的做一下整理：
先上代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
#main {
width: 400px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
justify-content: flex-start;
align-items:center; /* 垂直方向上居中 */
}
#main div {
width:80px;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
</div>
justify-content详解
定义和用法
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。
属性值
flex-start 默认值。整体靠容器左侧对齐
flex-end 整体靠容器右侧对齐
center 整体位于容器的中心
space-between 各行之间留有空白
space-around 各行周围留有空白
initial 设置该属性为它的默认值
inherit 从父元素继承该属性
注意
弹性盒父级必须display:flex;
flex:1;让所有弹性盒模型对象的子元素都有相同的长度,但是忽略它们内部的内容；内容过多还是要设置宽度，防止布局错乱
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
