弹性盒子

day10-弹性盒子模型

一、什么是伸缩盒模型flexbox

伸缩盒模型也叫弹性盒模型，或flexbox。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局。

目的：在浏览器窗口发生变化时，盒子相应改变大小。

（一）flexbox的基础知识

由于flexbox是一个整体的模块，他们之间一些属性是在父容器上设置，而一些是在子容器上设置。

（二）基本概念

1、概念

采用flex布局 的元素，称之为flex容器，简称容器。所以子元素称之为容器成员，简称项目，项目是可以再父容器中弹性布局的。

2、声明

任何元素都可以被声明成为flew布局

块元素： display：flex；       行内元素：inline-flex；

二、属性

（一）容器的属性

1、flex-direction

决定主轴的方向，即项目的排列顺序

row（默认值）：主轴为水平方向，七点在左端。

row-reverse：主轴为水平方向，起点在左侧。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2、flex-warp

默认情况下，项目都排在一条线上。如果一天轴线拍不下，那如何换行。

nowarp：（默认）不换行

warp：换行

warp-reverse：换行，第一行在下方。

3、flex-flow

flex-flow属性是flex-direction与flew-warp的符合属性，默认值是row nowarp。

4、justify-content

设置项目在主轴的对齐方式

flex-start：（默认）左对齐

flex-end：右对齐

center：居中对齐

space-between：两端对齐

space-around：平均分布

5、align-items

定义项目在纵轴上如何对齐。

flex-start：（默认）顶部对齐

flex-end：底部对齐

center：居中对齐

stretch：（默认值）如果项目未设置高度默认这个属性，将占满整个容器的高度。

6、align-content

定义多主轴对齐方式，如果项目只有一根轴线，该属性不起作用

flex-start：（默认）顶部对齐

flex-end:底部对齐

center：居中对齐

space-between：与交叉轴两端对齐

space-around：每根轴线两侧的间隔都相等

stretch（默认值）：如果没设置默认高度，轴线占满整个交叉轴。

（二）项目中的属性

伸缩盒中的每一个元素称之为一个项目

1、order

定义项目的排列顺序，数值越小，排列越靠前，默认为0。order：<interger>【order：1】

2、flex-grow

属性定义项目的放大比例，默认值为0 ，即使存在剩余空间也不放大。默认为0 ，1是放大，二是1的双倍大小，以此类推。

3、flex-basis

在、设置在分配多余空间之前，项目占据主轴的空间。 固定大小：默认是auto，即项目本来大小，可以设置px值，也可以设置百分百大小

4、align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto。表示继承父容器的 align-item属性。

auto（默认）：表示继承父容器的align-item属性。

flex-start：顶部对齐

flex-end：底部对齐

center：居中对齐

stretch：上下对齐并铺满

5、flex-shrink

定义子元素是否缩小

flex-shrink：<number>; 默认值是1，空间不足会缩小，值为0不缩小。

6、flex

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0、 1 、 auto。后两个属性可选  

三、伸缩盒实例

（一）筛子

（二）百度地图

（三）旧的伸缩盒

伸缩盒从被提出到如今一直在修改，所以这里涉及到新老写法。

1、版本问题

伸缩盒最老版本 display：box；

过渡盒过渡版本  display：flexbox；

最新版本：display：flex；

四、浏览器内核以及其前缀

1、Webkit内核   前缀-webkit-  谷歌内核

2、Gecko内核     前缀为-moz-   火狐浏览器

3、Trident内核     前缀为-ms-  IE内核

4、Presto内核 前缀-o- opera浏览器