移动web第三天
div中的子元素 发生一些改变
- 不再区分什么行内和块级 全部都可以设置宽度和高度
- 子项 默认宽度和高度 宽度 由内容支撑开 高度 等于父项的高
- 子项 使用浮动没有效果，使用定位、margin、transform都有效
- 默认情况下 子项总宽大于父项的宽也不会换行，flex不会换行，只会压缩自身的宽度而已
flex元素
1.flex-direction
决定主轴的方向
- row：默认值，主轴水平方向，起点在左
- row-reverse：主轴为水平方向，起点在右
- column：主轴为垂直方向，起点在上
- column-reverse：主轴为垂直方向，起点在下
2.flex-wrap
决定换行
- no-wrap：默认，不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第二行在上方
3.justify-content主轴对齐方式
子级在主轴的对齐方式，即每一行的排布方式，当每个子级的宽度不相同时设置之间的间隔
- flex-start：从左到右
- flex-end：从右到左
- center：居中
- space-between：两端对齐，子级之间间隔相等
- space-around：每个子级两侧的间隔相等
4.align-items侧轴-单行对齐方式
子级在交叉轴上如何对齐，即每一行子级高度不一样时设置
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline：子级的第一行文字的基线对齐
- stretch：默认值，若是子级未设置高度或设成auto，将沾满整个容器的高度
5.align-content侧轴-多行对齐方式
多根轴线的对齐方式。若子级只有一根轴线，该属性不起作用。
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：与交叉轴的中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等。因此，轴线之间的间隔比轴线与边框的间隔大一倍
- stretch“默认值，轴线占满整个交叉轴
超出两行溢出显示省略号
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
超出一行溢出显示省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
