其他分享
首页 > 其他分享> > CSS3弹性盒---怪异盒

CSS3弹性盒---怪异盒

作者:互联网

  怪异盒模型  

box-sizing:content-box     标准盒模型                     总宽/高度=width+左右/上下padding+左右/上下border

box-sizing:border-box      怪异盒模型(IE盒模型) 总宽/高度=width(包含padding和border)

  弹性盒  

特点:
1、在弹性盒里,所有子元素按照“主轴”排列
2、在弹性盒里,所有子元素都能设置宽高
3、在弹性盒里,一个元素如果在里面水平垂直居中,只需设置margin:auto;

display:flex;   使当前元素成为弹性盒,进而控制子元素

flex-direction  改变主轴
row                             默认x轴为主轴,横向排列
row-reverse               反转横向排列,右对齐,从后往前排,最后一项排在最前面。x轴底部显示(右)
column                       y轴为主轴,纵向排列
column-reverse         反转纵向排列,从下往上排,最后一项排在最上面 。y轴底部显示(下)

 

justify-content     元素在主轴上的对齐方式
flex-start             默认,顶端对齐
flex-end              末端对齐
center                 居中对齐
space-between   两端对齐,中间自动分配
space-around     自动分配距离

 

align-items   元素在侧轴上的对齐方式
flex-start       弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。顶部显示
flex-end        弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。底部显示
center           弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline        如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 当子元素被padding撑开时,不与flex-start等效。
stretch          默认值,拉伸,子元素无高时,将高拉伸为父元素高。

 

flex-wrap   是否换行
nowrap              默认值,flex容器为单行。该情况下flex子项可能会溢出容器
wrapflex             容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse     反转 wrap 排列。
注:当父元素有高度时,换行自带行间距

 

align-content   行与行之间的对齐方式
flex-start            没有行间距
flex-end             底对齐没有行间距
center                居中没有行间距
space-between  两端对齐,中间自动分配
space-around    自动分配距离
注:只针对多行

 

align-self   写在子元素上面,控制某一个子元素在侧轴的对齐方式
auto           默认值。
stretch       元素被拉伸以适应容器
center        元素位于容器的中心
flex-start     元素位于容器的开头
flex-end      元素位于容器的结尾

order   排列顺序 ---  排序优先级,数字越大越往后排,默认为0,支持负数。

flex   复合属性
flex-grow        拉伸,默认值为0,子元素宽高加起来小于父元素宽高,要有剩余空间,才会有效果,拉伸是宽是高跟主轴有关
flex-shrink      元素宽高超出父元素宽高才有效。为0时,无变化
flex-basis       项目长度
flex:1             将弹性盒主轴上剩余的空间全部分配给当前元素
复合式写法    flex:0 1 auto; 参数分别代表flex-growflex-shrinkflex-basis

标签:CSS3,flex,主轴,元素,弹性,start,对齐,怪异
来源: https://www.cnblogs.com/yznotes/p/12826357.html