弹性布局

Posted fangdongdemao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹性布局相关的知识,希望对你有一定的参考价值。

弹性布局

在讲弹性布局先科普一下

响应式:对不同分辨率设备进行css适配@media (设备变化)

自适应:不用@media采用比例布局,适应不同浏览器(窗口变化)

兼容性问题

添加-webkit 前缀

如果使用gulp,webpack就不用担心这些问题了

名词

容器:需要添加弹性布局的父元素

项目:弹性布局中的每一个子元素

主轴:在弹性怒局中,通过属性规定水平/垂直方向为主轴

交叉轴:与主轴垂直的另一方向

弹性布局的使用

给父盒子添加display:flex/inline-flex;

display:fiex; 添加后显示块级元素

display:inline-flex;添加后显示行级元素

设置Flex布局后,子元素的float.clearvertical-align属性失效,但是position属性依然生效

只给父盒子添加了display:flex;就可以让容器内部打破原有文档流模式,展示为弹性布局

技术分享图片

flex-direction属性决定主轴的方向(即项目的排列方向)

row(默认值): 主轴为水平方向,起点在左端

row-reverse: 主轴为水平方向,起点在右端

column: 主轴为垂直方向,起点在上

column-reverse:主轴为垂直方向,起点在下

技术分享图片

属性查找

以上是关于弹性布局的主要内容,如果未能解决你的问题,请参考以下文章

在css中如何声明弹性

Flex弹性盒子布局

弹性布局(Flex)布局介绍

css弹性布局是啥

弹性盒布局

弹性盒布局