您的位置:首页> 前端教程> CSS3教程
文章导航

CSS justify-content

2019-4-11 17:39| 作者: admin| 查看: 711| 评论: 0|来自: 蚂蚁部落

关于弹性布局更多内容可以参阅display:flex 弹性布局一章节。

本文将分步通过代码实例详细介绍一下justify-content属性的用法。

一.相关知识准备:

通过display:flex可以将元素设置为弹性布局容器元素。

容器元素具有两个轴线,默认状态下,水平的是主轴,垂直的是交叉轴。

如果项目的尺寸小于容器的尺寸,那么在主轴方向就会有剩余空间。

二.justify-content属性:

此属性应用于容器元素,这一点特别重要。

它用于规定容器元素中的项目如何去分配主轴方向项目之间与以及周围的空间。

语法结构:

[CSS] 纯文本查看 复制代码
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

属性值解析:

(1).flex-start:默认值,规定项目位于容器主轴的起始位置。

(2).flex-end:规定项目位于容器主轴的结束位置。

(3).center:规定项目位于容器主轴的中间。

(4).space-between:规定项目在主轴的两端对齐。

(5).space-around:规定容器中项目两侧都保留相等的空间。

(6).initial:F项目默认方式显示,可以参阅CSS initial 属性一章节。

(7).inherit:从父元素继承该属性。

特别说明:此属性必须应用于弹性布局容器元素,否则设置此属性无效。

浏览器兼容:

(1).IE10+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).火狐浏览器支持此属性。

(4).谷歌浏览器支持此属性。

(5).Opera浏览器支持此属性。

(6).safria浏览器不支持此属性。

上面对justify-content属性进行了理论上的阐述,可能很多朋友还是一头雾水。

这很正常,理论毕竟总有一种朦胧感,下面结合代码实例对属性值进行逐一演示。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:flex-start; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174039jw4zhhu1pk1p4wwm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对上述代码进行一下详细解析:

(1).外层div元素应用了display: flex,所以它被用作弹性布局容器元素。

(2).容器元素的justify-content属性值为flex-start,也就是规定项目以容器主轴起始位置对齐。

(3).也就是规定项目在容器主轴上左对齐,因为容器的左侧是主轴的起始位置。

(3).flex-start是默认属性值,可以省略。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:flex-end; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174104brdi8ihvmvoo6ffa.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码分析如下:

(1).外层div元素应用了display: flex,所以它被用作弹性布局容器元素。

(2).容器元素的justify-content属性值为flex-end,也就是规定项目以容器主轴结束位置对齐。

(3).也就是规定项目在容器主轴上右对齐,因为右侧是结束位置。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:center; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174133w517fwnh8uz5wovv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码分析如下:

(1).外层div元素应用了display: flex,所以它被用作弹性布局容器元素。

(2).容器元素的justify-content属性值为center,也就是规定项目以容器主轴居中对齐。

(3).也就是规定项目在容器主轴上居中对齐。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:space-between; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174202frk67y33bfey5yqf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码分析如下:

(1).外层div元素应用了display: flex,所以它被用作弹性布局容器元素。

(2).容器元素的justify-content属性值为space-between,也就是规定项目以容器主轴两端对齐。

(3).也就是规定项目在容器主轴上两端对齐,两侧紧贴主轴的起始位置与结束位置,项目之间间隔相同。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 400px;
  background:#ccc;
  display: flex;
  justify-content:space-around; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body> 
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174229vk7puq9ekqku6clh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码分析如下:

(1).外层div元素应用了display: flex,所以它被用作弹性布局容器元素。

(2).容器元素的justify-content属性值为space-around,可能此属性值会稍稍给一些朋友带来困扰。

(3).给每一个项目主轴方向的两侧指定一个空间,于是项目之间的间隔比项目与容器边缘的间隔大一倍。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 200px;
  height: 350px;
  background:#ccc;
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between; 
}
#main div {
  width: 70px;
  height: 70px;
  text-align:center;
  line-height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/174257v3r46ra334v2aswj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码的目的就是为了提醒读者,不要想当然的认为主轴必须是水平的。

通过flex-direction属性可以改变主轴的方向,上述代码中主轴是垂直的。

所以项目在垂直方向两端对齐,这一点要特别注意一下。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS flex-flow下一篇:CSS align-items

最新评论

返回顶部