CSS3弹性盒子之内容对齐justify-conten

弹性盒子（box-flex）是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，而不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。但是该属性目前只有部分浏览器支持，因此在pc端开发中应用的比较少。但是对于移动端，webkit核心浏览器几乎一统天下，web界面的制作上，使用弹性盒子是非常不错的！

CSS3弹性盒子justify-content（内容对齐）属性应用在弹性容器上，把弹性项（子元素）沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法：

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：默认值，弹性子元素向行头紧挨着填充。

例子：

css部分：
.father1{width:500px;height:400px;background: slategrey;margin:20px auto;display: -webkit-flex;display:flex;-webkit-justify-content: flex-start;justify-content: flex-start;}.son1{width:100px;height:100px;border:2px solid darkslategray;background: darkseagreen;margin:10px;line-height: 100px;text-align: center;color: #fff;}html部分：<div class="father1"><div class="son1">内容对齐1</div><div class="son1">内容对齐2</div><div class="son1">内容对齐3</div></div>

效果如图：

justify-content：flex-end；

弹性子元素向行尾紧挨着填充。第一个弹性子元素的main-end外边距边线被放置在该行的main-end边线，而后续弹性子元素依次平齐摆放。

例子：

css部分：
.father2{width:500px;height:400px;background: slategrey;margin:20px auto;display: -webkit-flex;display:flex;-webkit-justify-content: flex-end;justify-content: flex-end;}.son2{width:100px;height:100px;border:2px solid darkslategray;background: darkseagreen;margin:10px;line-height: 100px;text-align: center;color: #fff;}html部分:<div class="father2"><div class="son2">内容对齐1</div><div class="son2">内容对齐2</div><div class="son2">内容对齐3</div></div>

效果如图：

justify-content：center；

弹性项目居中紧挨着填充。但是如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出。

例子：

css部分：.father3{width:500px;height:400px;background: lightcoral;margin:20px auto;display: -webkit-flex;display:flex;-webkit-justify-content: center;justify-content: center;}.son3{width:100px;height:100px;border:2px solid crimson;background: coral;margin:10px;line-height: 100px;text-align: center;color: #fff;}html部分：<div class="father3"><div class="son3">内容对齐1</div><div class="son3">内容对齐2</div><div class="son3">内容对齐3</div></div>

效果如图：

justify-content：space-between；

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

例子：

css部分：.father4{width:500px;height:400px;background: midnightblue;margin:20px auto;display: -webkit-flex;display:flex;-webkit-justify-content: space-between;justify-content: space-between;}.son4{width:100px;height:100px;border:2px solid darkblue;background: cornflowerblue;margin:10px;text-align: center;color: #fff;}html部分：<div class="father4"><div class="son4">space-between1</div><div class="son4">space-between2</div><div class="son4">space-between3</div></div>效果如图：

justify-content：space-between；

例子：

css部分：.father4{width:500px;height:400px;background: midnightblue;margin:20px auto;display: -webkit-flex;display:flex;-webkit-justify-content: space-between;justify-content: space-between;}.son4{width:100px;height:100px;border:2px solid darkblue;background: cornflowerblue;margin:10px;text-align: center;color: #fff;}html部分：<div class="father4"><div class="son4">space-between1</div><div class="son4">space-between2</div><div class="son4">space-between3</div></div>

效果如图：

justify-content：space-around；

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

例子：

css部分：

.father5{

width:500px;

height:400px;

background: midnightblue;

margin:20px auto;

display: -webkit-flex;

display:flex;

-webkit-justify-content: space-around;

justify-content: space-around;

}

.son5{

width:100px;

height:100px;

border:2px solid darkblue;

background: cornflowerblue;

margin:10px;

text-align: center;

color: #fff;

}

html部分：

<div class="son5">space-around1</div>

<div class="son5">space-around2</div>

<div class="son5">space-around3</div>

</div>

效果如图：

CSS3弹性盒子之内容对齐justify-conten相关推荐

html弹性盒子垂直排列,css3弹性盒子布局
css3弹性盒子布局 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒布局模型的目的是 ...
CSS3 弹性盒子和常用标签
CSS3弹性盒子学习目标掌握CSS3弹性盒子的使用方法掌握CSS3弹性盒子的水平分布方法重点掌握CSS3弹性盒子的垂直分布的方法重点掌握CSS3弹性盒子排序的用法 CSS3 弹性盒子属性 ...
CSS3弹性盒子Flex
CSS3弹性盒子Flex 基础知识和术语原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 父级(flex容器)的属性 #显示 ...
css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...
css3弹性盒子模型之box-flex
css3弹性盒子模型之box-flex 浏览器支持目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...
CSS3弹性盒子布局
弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方式.引入弹性盒 ...
css3弹性盒子模型之box-flex（--）
今天看到蓝色理想上面有一篇文章讲<css3弹性盒模型布局模块介绍>里面讲到用box-flex,突然觉得有点心慌,上次看到响应式网页设计里面也同样讲到flex box自适应布局,而上次竟然 ...

CSS3弹性盒子之内容对齐justify-conten

CSS3弹性盒子之内容对齐justify-conten相关推荐

最新文章

热门文章