工作中的CSS

常用的页面布局

flex弹性布局
使用display：flex为元素开启弹性布局，称为弹性容器，弹性容器的子元素为弹性项目。
有两种不同的属性：
1.设置在弹性容器身上：
flex-direction:row、row-reverse、column、column-reverse
flex-wrap:wrap、nowrap、wrap-reverse
flex-flow相当于三个属性的简写：flex-flow:flex-direction flex-wrap
justify-content:center、space-between（左右对齐紧挨容器，元素间距一样）、space-around（每个元素的左右间距都一样包括最左和最右的元素）、flex-start（左对齐）、flex-end（右对齐）
align-items:center、stretch、flex-start、flex-end

2.设置在项目自身
flex相当于三个属性的简写 ：flex :flex-grow flex-shrink flex-basis
align-self和align-items属性一致，用在单个项目上使可以覆盖掉align-items的值。
自适应布局
响应式布局