css justify-content属性笔记

原创 PHP笔记  2017-09-14 18:23  阅读 3,126 views 次

justify-content属性定义及用法

1、在css中,justify-content属性是用来设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

2、justify-content相似属性:align-content属性是用来对齐交叉轴上的各项(垂直)。

justify-content属性值

  • flex-start:位于容器的开头(默认值)。
  • flex-end:位于容器的结尾。
  • center:位于容器的中心。
  • space-between:位于各行之间留有空白的容器内。
  • space-around:位于各行之前、之间、之后都留有空白的容器内。
  • initial:设置该属性为它的默认值。请参阅 initial。
  • inherit:从父元素继承该属性。

格式:

justify-content: flex-start / flex-end / center / space-between / space-around / initial / inherit;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css justify-content属性笔记</title>
<style>
#fx {
width: 500px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;/*flex容器布局*/
justify-content:space-between;/*位于各行之间留有空白的容器内*/
}
#fx div {
width: 100px;
height: 100px;
}
</style>
<head/>
<body>
<div id="fx">
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
</div>
</body>
</html>

运行结果:

非常相关
本文地址:https://www.ggbiji.com/css-justify-content.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情