CSS知识点5

一.弹性盒子的定义

        CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

二.弹性盒子的内容

        弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成。

        弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。

        弹性容器内包含了一个或多个弹性子元素。

三.弹性盒子的主要属性：

flex

　flex-grow

　　flex-shrink

　    flex-basis　

　　flex-dicection

　    flex-warp　

　　align-content

　    align-items

　    align-self

　    justify-content

　    order

四.设置弹性盒子的属性 

　　display：flex    inline-flex  (这两者的区别就是， 一个是 block   一个是 inline-block)

　flex: direction

 设置主轴的方向。 默认的主轴是 横向 的，从左到右排列，另一条轴叫做 交叉轴，  也就是我们理解的纵向，

参数：

　　row：默认值，主轴横向的，从左向右排列

　　row-reverse：主轴还是横向的，只是里面项目的 排列方式不一样， 是从右向左的。

　　column：把主轴变成 纵向的，排列方式 也就变成了，从上向下

　　column-reverse：主轴变成 纵向的，排列方式颠倒， 从下向上排列。

　flex-wrap：
设置，子元素溢出，是否换行。

参数：

　　nowrap：默认值(也就是不换行。子元素如果的宽  大于父元素的，会压缩子元素)  把所有子元素排列在一行

　　wrap：子元素溢出，会换行，变成多行的形式

　　wrap-reverse：颠倒 wrap 的排列方式 (也会变成多行的形式)

　　justify-content:

设置横轴(横向)的对齐方式

参数：

　　flex-start：默认值 对齐起始位置，第一个子元素的起始位置，然后其他子元素向它看齐

　　flex-end：跟上面相反的，也就是说，人家对齐在开始，这个对齐在 最后面

　　center：居中对齐

　　space-between：如果有多余的空间，就会平均分布，每个子元素的 两边空白空间保持一致(头尾的子元素贴边)

　　space-around：如果有多余的空间，就会平均分布，每个子元素的 两边空白空间保持一致(头尾的子元素不会贴边)

　align-items: 

设置(纵轴)纵向的对齐方式：(单行)

参数：

　　 flex-start：默认值 对齐起始位置

　　flex-end：跟上面相反的，也就是说，人家对齐在起始位置，这个对齐在 最下面

　　center：居中对齐

　　baseline:   基线对齐

　　stretch:   如果没有设置子元素高度，那么全部子元素的高度都会被拉伸

align-content:

align-content 跟上面的 align-items 的区别就是，一个是操作单行的，一个是操作多行的。  参数都是一样的设置， 除了多了两个 space-betwwen  ，space-around   

设置纵向的对齐方式(多行)

参数：

　　flex-start：

　　flex-end：

　　center：  

　　space-betwwen  

　　space-around   

　　stretch