css弹性盒之justify-content详解

最新推荐文章于 2025-06-06 17:09:22 发布

原创最新推荐文章于 2025-06-06 17:09:22 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

chen

文章标签：

#justify-content #flex

html、css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS弹性盒布局中的justify-content属性的使用方法及其不同取值的效果，并通过实例展示了如何实现水平方向上的对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天没事把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>