Flex
语法篇
对全部语法感兴趣的可以去查阅文档,这里只说几个常用到的以及个别坑:
- display: flex || line-flex
- flex-direction: row || row-reverse || column || column-reverse
- justify-content: flex-start || flex-end || center || space-between || space-around
- align-items: flex-start || flex-end || center || baseline // 这里说一下baseline 以项目的第一行文字对齐
- align-content: 同justify-content
- order: 数值越小 排列越靠前
- flex-basis: 将项目占据固定的空间,有些flex布局才有效果
- flex: 一般用于设置项目所占的大小比例
- align-self: 同align-items
- 另外,设置了flex布局后,子元素的float,clear,vertical-align属性会失效
实例篇
flex圣杯布局
|
|
BFC(块级格式化上下文)
BFC是一个独立的布局环境,其中的元素布局不受外界影响。
触发BFC的方式:
- position不为static,relative
- float的值不为none
- overflow的值不为visible
- display的值不为inline,block,none
触发BFC能解决什么?
- 外边距重叠
- 包含浮动(类似清除浮动)
外边距重叠
|
|
这样设置的margin就会触发重叠,item2和item以及item3之间的间距并不会相加为20px,而都是10px,想要解决这种问题,就可以触发BFC。
|
|
通过overflow:hidden 触发bfc之后,外边距就不会重叠在一起了。
包含浮动
|
|
浮动塌陷,父元素无法获得能够撑开资源的高度。我们通常使用clearfix hack方法,不过用bfc也可以解决这个问题。12345678.container { background-color: #ccc; border:1px solid #ccc; overflow: hidden;}.box { float: left;}
同样,通过overflow:hidden来触发bfc,解决浮动元素塌陷。