利用CSS3 新添加的盒子模型属性 box-flex;可以让子容器针对父容器的宽度按一定规则进行划分。ie 目前不支持,估计后续版本会兼容这个属性。
必须在父元素上面加上display:box才可以对子元素进行规则划分。
box-flex:1这里的 1 指的是比例 。
如:
<!DOCTYPE html><head>
<title></title>
<style>
.box {
width: 200px /*宽度没有限制*/
height: 200px
display: -webkit-box /*这个必须要有*/
-webkit-box-orient:vertical /* 默认横向划分 vertical 为纵向划分*/
}
.box div{
height:100%
}
.div1{
background-color:red
-webkit-box-flex:1
}
.div2{
background-color:blue
-webkit-box-flex:1
}
.div3{
background-color:green
-webkit-box-flex:1
}
.div4{
background-color:darkblue
-webkit-box-flex:1
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
一、区别
1、参数详解
margin:auto = margin:auto auto auto auto
margin:0 auto = margin:0 auto 0 auto
margin:n m p q表示该元素上外边距为n,右外边距为m,下外边距为p,左外边距为q,即 margin:上 右 下 左 ,逆时针一圈。
2、实例说明
margin后面是有4个参数的。
例如:margin:1px 2px 3px 4px,分别表示 上(1px)、右(2px)、下(3px)、左(4px)。
margin后面如果只写2个参数的。
例如:margin:1px 2px
那么这是代表 上下都为1px 左右都为2px。
扩展资料
1、margin 0px auto属性规则
margin:0px auto代表对象上下间隔为0px,左右间隔根据对象宽度自适应。
margin:0px auto简写:可以去掉0后面的px单位,一般CSS代码中如果值为0,那可以不用跟html长度单位。
margin0px auto或margin:0 auto作用:常用于让DIV布局居中,起到让布局居中作用。
2、margin:auto属性说明
margin:auto时浏览器计算外边距,当margin定义为auto时,将占用可用空间或0px 。
margin:auto时浏览器会自动分配左右边距,使元素平均分配占用父级容器的左右边距,达到元素居中的目的
3、CSS中auto元素
定义auto元素,因元素类型和上下文而异。在边距中,auto可以表示两种情况:占用可用空间或0 px。这两个将为元素定义不同的布局。
4、margin的兄弟属性padding
margin属性是外边距,而padding属性是内边距。padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。
什么是flex布局?
传统的布局方案是基于盒模型,依赖于display:block和float+position,但是对于一些特殊的布局来说就不是很方便,如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案,flex弹性盒布局,目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局,用来为盒模型提供最大的灵活性。 任何一个容器(标签)都可以指定为flex布局。用display:flex;
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴:水平的主轴(main axis)和垂直交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后,这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex;将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列(从左向右)
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。)
column :纵向排列。
column-reverse:反转纵向排列,从下往上排,最后一项排在最上面
3.内容对齐(justify-content)属性应用在 弹性容器 上,把弹性项沿着弹性容器的主轴线(main axis)对齐
justify-content:flex-start 默认,左对齐(图1)
justify-content:flex-end 右对齐(图2)
justify-content:center 居中对齐(图3)
justify-content:space-between 两端对齐,中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items(交叉轴对齐方式)
flex-start:顶端对齐
flex-end:底对齐
center:垂直居中对齐
baseline:项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器(注:子元素不能设置高)
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
nowrap:flex容器为单行。该情况下flex子项可能会溢出容器
wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse:反转 wrap 排列。
图1(nowrap)注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2(wrap)
图3(warp-reverse)
容器单行或者多行方式
6、align-content(行与行之间对齐方式)
当伸缩容器的侧轴还有多余空间时,本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式,这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注:本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐,中间自动分配
space-around自动分配距离