传统的布局解决方案--盒状模型--diplay + position + float
缺陷:对于一些特殊布局(垂直居中)和网格式布局(几行几列)不易实现
09年w3c颁布的--flex布局--使用简单、api完整丰富、响应式动态地实现各种页面布局(一些常见的布局思想)
当然针对gekco30+以下,最好的布局选择就是flex了,更新式的grid布局它不支持。
本文来源地: ,一个非常好的css内容及前端资讯的网站
flexible box弹性布局
任意容器都可以指定成flex布局:
.box { display: flex; } <!-- 行内元素 --> .box { display: inline-flex; }
设为flex布局后,子元素的float、clear、vertical-align将失效
称采用flex布局的元素为flex容器(flex container),它的所有子元素自动成为容器成员,称为flex项目(flex item)。
1.flex-direction值:
2.flex-wrap值:
默认情况,所有flex项目会排在一条线上,不会自动换行
3.flex-flow默认值:row nowrap
.box { flex-flow: <flex-direction> <flex-wrap>; }
4.justify-content值:
5.align-items值:
6.align-content值:
.item { order: <integer>; }
如果所有项目flex-grow属性为1,它们将等分剩余空间。以此类推
如果所有项目flex-shrink属性为1,当空间不足时等比例缩小。
如果有一个项目flex-shrink为0,其他项目都为1,空间不足时前者不缩小
浏览器据此计算主轴是否有多余空间,默认值为auto即项目本来的大小
.item { flex-basis: <length> | auto; }
.item { flex: none | [<flex-grow> <flex-shrink> ? || <flex-basis>] }
有两个快捷值:
auto: 1 1 auto
none: 0 0 auto
建议优先使用此属性代替单独写3个分离的属性,因为浏览器会推算相关值。
默认值auto,表示继承父元素的align-items,如果没有父元素则等同于strech
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
如对本文有疑问, 点击进行留言回复!!
深入理解CSS background-blend-mode的作用机制
网友评论