display:flex; flex-direction 决定主轴的方向(即项目的排列方向) row(默认): 主轴水平方向,起点在左端 row-reverse: 主轴水平方向,起点在右端 column: 主轴垂直方向,起点在上边沿 column-reverse:主轴垂直方向,起点在下边沿 flex-wrap 定义换行情况 nowrap(默认): 不换行 wrap: 换行,第一行在上方 wrap-reverse: 换行,第一行在下方 flex-flow flex-direction和flex-wrap的简写 row nowrap 默认 justify-content 定义项目在主轴上的对齐方式 start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline flex-start(默认值): 左对齐 flex-end: 右对齐 center: 居中 space-between: 两端对齐,项目之间间隔相等 space-around: 每个项目两侧的间隔相等,即项目之间的间隔比项目与边框的间隔大一倍 align-item 定义在交叉轴上的对齐方式 stretch(默认值): 如果项目未设置高度或设为auto,将占满整个容器的高度 flex-start: 起点对齐 flex-end: 终点对齐 center: 中点对齐 baseline: 项目的第一行文字的基线对齐 align-content 定义多根轴线的对齐方式 stretch(默认值):轴线占满整个交叉轴 flex-start:与交叉轴的起点对齐 flex-end:与交叉轴的终点对齐 center:与交叉轴的中点对齐 space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布 space-around:每根轴线两侧的间隔相等,即轴线之间的间隔比轴线与边框的间隔大一倍 flex-grow属性:定义项目的放大比例 默认值为0,即如果空间有剩余,也不放大。 可以是小数,按比例占据剩余空间 flex-grow: 1; /*铺满剩余空间*/必须父级有display:flex flex-shrink属性:定义项目的缩小比例 默认值都为1,即如果空间不足将等比例缩小。 如果有一个项目的值为0,其他项目为1,当空间不足时,该项目不缩小。 负值对该属性无效,容器不应该设置flex-wrap flex-basis属性:定义在分配多余空间之前,项目占据的主轴空间 默认值为auto,浏览器根据此属性检查主轴是否有多余空间 flex属性是flex-grow,flex-shrink和flex-basis的简写 默认值为0 1 auto,第一个属性必须,后两个属性可选
单行居中,两行居中
<div><span>单行居中,两行居中</span></div>
span{ display:-webkit-box;/*将对象作为弹性伸缩盒子模型显示。*/ -webkit-line-clamp:2;/*这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。*/ -webkit-box-orient:vertical;/*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/ overflow:hidden; text-overflow:ellipsis;/*溢出用省略号显示*/ } div{ width:200px; font-size: 18px; height: 46px; line-height: 23px; display: flex; align-items: center; justify-content: center; }