Flex弹性布局

开发工具与关键技术：Visual Studio 2015 ,MVC
作者：任浩基
撰写时间：2019/6/5

今天我们就来讲讲Flex弹性布局，相信懂编程的人，都应该听过这个词吧—Flex。那么Flex弹性布局是用来干嘛的呢？顾名思义就是用来实现一套实用程序。我们在一引入新的Flex弹性布局，可以通过实现一整套响应灵活的实用程序，快速管理栅格的列、导航、组件等的布局、对齐和大小。通过进一步的定义CSS，还可以实现更复杂的展示样式。在启用Flex弹性布局时，要使用display通用属性来创建一个flxbox容器，并将直属内部子元素转换为flex属性。Flex元素的容器和子项目可以通过额外的flex属性定义来实现进一步修改。
下面我来说说flexBox布局都为我们提供了什么:
1、 在父元素里面内容的简单的垂直对齐。
2、 通过使用媒体查询，可以简单的根据设备和屏幕分辨率来对内容重新排序。
3、 CSS就能实现登高布局以及垂直处理。
同时响应式也存在于.d-flex and .d-inline-flex这两个通用Class上。
基于系统提供的通用样式定义，我们可以设定flex的容器与内部flex元素的方向，在大多数情况下你可以忽略水平的Class样式定义，因为浏览器的默认值是row，但在比如响应布局时，可能需要进行显式设定此值。浏览器预默认值下，使用.flex-row可设置子元素方向排版呈现，或者使用.flex-row-reverse可实现元素在水平上作反方向排列(右对齐、从右到左布局)。
下面我们来看效果图:

当然啦，上述效果图是由代码运行而得到的，代码请看:

通过对上述代码以及运行得到效果图的理解，我们大致都能模式出自己的一套思路来吧。其实flex弹性布局根本就不难理解的，关键还是看你怎么去定义，怎么去理解它而已。
使用flexbox弹性布局容器上的justify-content-*通用样式可以改变flex项目在主轴上的对齐（x轴开始，如果flex-direction: column则为y轴），或选方向（值）包括:start(浏览器默认值)、end、center、between、around。使用align-items-*通用样式可以在flxbox容器上实现flex项目的对齐（y轴开始，如果选择flex-direcrion: column则从x轴开始），可选参数有:start、end、center、baseline、stretch(浏览器默认值)。还有使用align-self-*通用样式可以使用flexbox上的项目单独改变在横轴上的对齐方式（y值开始，如果flex-direction: column则为x轴开始），其拥有与align-items相同的可选子项:stsrt、end、center、baseline、or stretch（浏览器默认值）。使用.flex-grow-*实用程序切换弹性项目的增长能力以填充可用空间。Flex-grow-1元素使用它可以使用的所有可用空间，同时允许剩余的两个Flex项目具有必要的空间.flex-shrink-*如有必要，使用实用程序切换弹性项目的缩小能力.flex-shrink-1被强制将其内容封装到一个新行中，“缩小”以允许前一个Flex项目具有更多空间.w-100。当你将flex对齐与auto margin混在一起的时候，flexbox也能正常运行。以下是通过自动manrgin来控制flex项目的三种示例，分别是预设（无margin）、向右推两个项目（.mr-auto）、向左推两个项目（.ml-auto）:
下面我们请看代码以及效果图:

结合align-items、flex-direction: column、margin-top: auto或margin-bottom:auto,可以垂直移动一个flex子容器懂顶部或底部。改变flex项目在flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap（浏览器默认）、包裹.flex-wrap，或者反向包裹.flex-wrap-reverse。
我们使用系统提供的通用样式定义可以实现弹性项目的可视化排序。我们仅提供将一个特件排在第一或最后，以及重置DON顺序,由于order只能使用整数值（如:5），因此对于需要的任何额外值需要自定义CSS。
我们都知道布局的传统解决方案，基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如垂直居中就不容易实现。
Flex是Flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。不过我们要注意一点就是 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
容器默认存在两根轴: 水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴
空间叫做main size，占据的交叉轴空间叫做cross size。请看下图：

讲解就到这里了，如果您想更详细的，请自行百度即可。