Flexible boxes更加优雅的Web布局

Flexible boxes layout是W3C为了更好的在网页中排版和布局而设计出来的一个模块。它用来可以处理更加复杂的布局。它本质是盒模型的延伸,它可以进一步去规范容器中子元素盒模型之间的相对关系。

基础知识点

Flexible boxes

Flexible boxes盒子按照宽和高分出了main axis(主轴)和cross axis(和主轴交叉的轴),盒子的上边称为cross start,下边称为cross end,左边称为main start,右边称为main end

Flexible boxes可以解决什么问题

完全居中

在前端中实现居中是一件很头疼的事情,尤其是实现垂直居中,之前在一个老外的博客上看到一篇实现置中的七种方法,其中提到一种最简单的方法就是使用transform,需要5行代码可以实现完全置中。

下面看一下Flexible boxes实现置中:

.flex-container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

Flexible boxes只要3行代码就可以实现置中。

等高的卡片式布局

在没有用Flexible boxes之前很多卡片设计的网站都有这样一个问题,由于卡片里面的内容多少不同,而产生的不等高问题。

Flexible boxes简单的实现等高列:

.flex-container{
      display:flex;
  align-items: stretch;
   }

Flexible boxes能用在哪里

兼容性

Flexible boxes

可以看出Flexible boxes从提出到现在也已经有了8个草案。Flexible boxes更新了三种写法。

Flexible boxes

caniuse上各个浏览器支持的情况

Flexible boxes

稍微整理一下(这里借用gitcafe的JaychSu的图用一下)

从这里可以看出现代浏览器都支持最新的那个版本,只有IE10支持中间那个版本。

使用CSS预处理器定义的@mixin解决Flexible boxes版本兼容

在github上有大神把Flexible boxes三个版本搞成一个Sass的@mixin,这样可以在需要的地方直接@include进来就可以轻松解决三个版本的兼容问题。

sass关于Flexible boxes的mixin的github项目地址

Flexible boxes实现的原理逻辑

display(定义容器里面为flex文档流)

  • dislpay:flex使父容器表现为块盒子
  • display:inline-flex使容器表现为行盒子

2. flex

flexflex-grow,flex-shrink,flex-basis的缩写形式。默认值是0 1 au

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/flexboxgeng-jia-you-ya-de-webbu-ju.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部