css弹性盒模型

原创 小Q 随笔 弹性盒模型 189阅读 2018-09-05 18:11:33 举报

容器属性

display:flex

flex-direction

设置弹性盒模型排列方式

默认值row
row 横向
row-reverse横向的反向
column纵向
column-reverse纵向的反向

flex-wrap

设置交叉轴换行的方向
默认nowrap不换行
wrap换行
wrap-reverse换行的反向

复合样式为

flex-flow:flex-direction flex-wrap

justify-content

设置主轴上的对齐方式

flex-start
flex-end
center
space-between
space-around
依次为以(主轴起点对齐),(终点对齐),(居中对齐),(两端对齐同时两端没间距,中间的元素均分对齐),(两端对齐同时两侧的间距为中间间距的一半)

align-items

定义项目在交叉轴上的对齐方式(注意:单行)

flex-start
flex-end
center
baseline
strecth
依次为(交叉轴起点对齐),(终点对齐),(居中对齐),(基线对齐),(默认对齐,项目没有定义宽高的时候,按照外部盒子的高度延伸,如果定义了就按照项目的内容撑开),所有的如果定义了就按照项目的内容撑开。

align-content

定义项目在交叉轴上的对齐方式(注意:多行)

flex-start
flex-end
center
baseline
strecth
与上类似,默认值也是stretch

项目属性

order

:项目的排序,默认值为0,序号越小越靠前

flex-shrink

设置项目缩小的比例,默认是为1,当容器空间不足时会缩小
0为不缩小

flex-grow

:设置项目放大的比例,0不放大,1放大

flex-basis

从主轴上空间分配宽度
默认值为auto
可以为像素,百分比,50%即为主轴上分配百分之50,一半

复合属性为

flex:flex-grow flex-shrink flex-basis
例如

flex:1 1 auto 既放大又缩小,还自动==flex:auto

flex:0 0 auto既不放大也不缩小,还自动==flex:none

align-self

设置单个项目交叉轴的对齐方式
flex-start
flex-end
center
baseline
strecth
align-self与align-items作用一样
不同的是align-self对单个设置,且align-self会覆盖align-items的设置

评论 ( 1 )
最新评论
花未央 2018-09-05 18:15:09 1F

我就是来看看头像的