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容器也可以是其他的任何元素。

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

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