其他css问题
css相关能写一万年,考虑分开写了,太多了
flex布局
更多参见阮老师blog
1.意为弹性布局,块元素:display:flex;行内元素:display:inline-flex;
2.不同内核浏览器需要加前缀区分,如:display:-webkit-flex; /Safari/ 非规范属性值:display:-webkit-box
3.设为flex布局后,子元素的float,clear,vertical-align属性将失效。 非规范属性:-webkit-box-orient:vertical //垂直排列子元素
4.flex属性:
1)flex-direction:row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿
2)flex-wrap属性: nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
3)flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
4)justify-content:flex-start | flex-end | center | space-between | space-around
5)align-items: flex-start | flex-end | center | baseline | stretch;
6)当使用了flex-direction:column
之后,未定宽的元素会自动适应宽度为100%;给元素加个非默认值align-self:stretch
外的值就可以