弹性盒模型布局以及解决常见CSS布局问题的五种flexbox方法

弹性盒模型布局以及解决常见CSS布局问题的五种flexbox方法

flexbox弹性盒模型)是一种专门针对用户界面设计的优化标准。使用各种flexbox属性,我们就可以通过编写小的构建块来构建页面,之后还可以轻松地定位和调整成任何我们想要的样式。以这种方式构建的页面和应用程序能够响应和适应所有的屏幕尺寸。

在本文中,我们来看一下解决常见CSS布局问题的五种flexbox方法。我们也给出了一些实例来展示现实生活场景中如何应用这些技术。

1.创建等高列

这个乍一看起来并不难,但是使每一列都具有相同的高度真的也很烦人。简单地设置最小高度是行不通的,因为一旦内容列的数量开始不同,其中一些列就会变宽,而另一些就会变短。

用floxbox来解决这个问题就再简单不过了,因为flexbox创捷的列默认相同的高度。所有我们要做的就是将flex模型进行初始化,然后确保flex-direction和align-items属性的默认值。

想要看到这项技术的演示,你可以查看我们的这篇文章--“用最简单的方法创建相同高度的侧边栏”,里面有我们用一个侧边栏和主要内容部分创建的一个响应页面。

弹性盒模型布局以及解决常见CSS布局问题的五种flexbox方法

2.重新排序的元素

在此之前,如果我们不得不动态地改变一些元素的顺序的时候,我们可能会使用浏览器兼容性(css hack)技术来解决,发现不好用后,就转而选择javascript。然而用flexbox的话,这也就是涉及到应用一种css属性的事了。

所谓的排序,就像它的名字一样,直接而简单。它允许交换任意数量的flex项目,并且可以改变他们在屏幕上的顺序。它的唯一参数是一个整数,决定着该元素的位置--较低的数字意味着更大的优先级。这个排序属性有许多实际用途。如果你详细了解,你可以查一下这篇文章,我们用它来建立一个响应式内容面。

弹性盒模型布局以及解决常见CSS布局问题的五种flexbox方法

3.水平和垂直居中

css实现垂直居中一直是众多困扰我们的问题之一:就这么一点儿小事怎么就那么复杂呢?但它真就那么复杂。如果你google一下“css实现垂直居中”,就会弹出无数种不同的技术,这些技术大多数设计表格或转换,而不是布局设计。

Flexbox提供一个更简单的解决问题的办法。每一个flex布局都有两个方向(X轴和Y轴)和两个独立的属性对齐。通过居中,我们可以将任何元素置于其父容器的中间位置。

要想了解更多关于这项技术的实际运用,可以去查看相同主题 "快速提示"文章。

弹性盒模型布局以及解决常见CSS布局问题的五种flexbox方法

4. 创建响应式网格

大多数开发者依赖CSS框架创建响应式网格。Bootstrap是最受欢迎的一个,但有成百上千的库可以帮你完成这个任务。他们通常工作得很好,有很多选择,但往往很繁杂。如果你独立做事的能力够强或者不想用整体框架网格,flexbox绝对可以让你如愿以偿。

flexbox中的行用display:flex就可以表示一个简单的容器。里面的水平的列可以是任意数量的元素,通过flex设置大小。

弹性盒模型布局以及解决常见CSS布局问题的五种flexbox方法

5.创建一个超棒的固定的底部

弹性盒子对这个问题也有一个简单的解决方案,当构建包含固定底部的页面的时候,通过在弹性元素上设置各种样式,我们可以确保我们的页脚会固定到页面的底部。

通过给body设置display: flex 属性,让我们构建的整个页面都有弹性特性。一旦这样做,网站的主要内容可以是一个灵活的项目和一个底部,这使得它很容易操纵他们的定位,并把它们精确地放置在我们想要的地方。

你也可以了解更多的信息 通过这篇文章“创建固定底部的最好方法”。

弹性盒模型布局以及解决常见CSS布局问题的五种flexbox方法

结论

所有的主流浏览器(除了IE9)都支持flex布局模式,除非你还要考虑使用古老的微软浏览器的用户,否则,强烈推荐你试试flex。

我们希望你觉得我们的css技巧是有用的,希望他们能够帮助你建立更好的更灵活的响应式布局,享受学习的乐趣!

  • 版权声明: 本文源自 极客标签, 于6个月前,由整理发表,共 1483字。
  • 原文链接:点此查看原文

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: