Flexbox一出,谁与争锋?

Flexbox一出,谁与争锋?

这一期呢,我们来谈一下flexbox。在css的编程中,flex box是一个非常强大的布局管理工具。

对于一个程序员来说,样式编程是比较痛苦的一个过程。因为这个部分跟我们常规的写代码概念不太一样。

啊,那个是题外话,我们继续来讲,flex box.

顾名思义,flex box就是灵活的框架布局。这门技术从大的方面来说包含两个部分,一个是容器,一个是容器内的元素。

先来说一下容器这一层。

在容器里层:

你可以设置元素是横向排列还是纵向排列。

你可以设置容器内内容的布局位置。比如说靠顶部,居中,靠底部,互斥靠边, 均匀分布等等。

你可以通过容器来设置元素的正向反向数据的顺序。

你可以选择对容器内元素进行压缩排列,还是换行排列。

接下来,我们看容器内的元素这一层:

元素的一层可以对容器层内设置进行重写。这些设置有对准的方式。

你可以设置单个或者多个元素。

你可以对某个元素设置拉伸。那么其他元素就是缺省的长度或者高度。可拉伸的元素就会占据所有剩余的空间。

具体的属性还有很多,这个可以参考相关的技术手册。这里就不一一列举了。

Flex box,另一个非常重要的概念就是独立性非常好。它只针对本身这一层的设置不会影响到其他层。比如说flex box里面你可以有子元素,这些子元素可以是flex box也可以,不是flex box。这个需要你自己单独的设置。

这个为什么很重要呢?在你编程中可能有很多其他的程序员不熟悉flex box,已经写了很多代码,用的是其他技术。页面已经做得很不错了。那么你如何重用这些技术呢?

正是因为flex box本身的独立性。容器的设置只会影响自己的直接子元素,不会影响到子元素的子元素,这样子,代码重用变得非常简单。没有任何遗留性的问题。

这里我想到了一个词儿,萝卜就酒嘎嘣脆。干净利落。

好,这里做个小结。Flex box我们只需要关注两个元素,一个是父级元素也就是容器,一个是子集元素。在容器里可以放很多很多的元素。这些子元素可以是flex box容器也可以是其他的任何元素。

这一期就说这些,希望对大家有所帮助。

这里是丁哥开讲,欢迎关注防止失联。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190807A02S1500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券