flexbox学习

一、概述：

flex是flexbox的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定flex布局。注意flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex布局的主要思想是给容器控制项目（flex项目）的宽度、高度的能力，使得flex项目可以自动填满容器的可用空间（主要是适应所有类型的显示设备和屏幕大小）。flex容器使得flex项目可以自动放大和收缩来填补可用的空闲空间。

.box{
  display: flex;
}

—行内元素也可以使用flex布局。

.box{
  display: inline-flex;
}

—webkit内核的浏览器，需要加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari，chorme */
  display: flex;
}

二、基本概念：

 采用flex布局的元素称为flex容器。其所有子元素自动称为容器成员，称为flex项目。

flex项目是沿着主轴main axis（main-start向main-end）或者与主轴垂直的交叉轴cross axis(cross-start 向cross-end)的排列。

三、flex容器的属性

• display

定义一个Flex容器，根据其取的值来决定是内联还是块。Flex容器会为其内容建立新的伸缩格式化上下文。

Flex容器不是块容器，因此有些设计用来控制块布局的属片在Flexbox布局中不适用。特别是：多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。

如果元素display的值指定为inline-flex，而且元素是一个浮动元素或绝对定位元素，则display的计算值是flex。

3.1 flex-direction

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex属性的取值为：row(主轴为水平方向从左到右)|row-reverse（主轴水平方向，从右到左）|column（垂直方向，从上到下）|column-reverse（垂直方向，从下到上）;

---

3.2 flex-wrap

默认情况下flex项目能尽可能放在一行显示，可根据flex-wrap属性值来改变，让flex项目多行显示，取值分别为nowrap(不换行）|wrap(换行，第一行在上方)|wrap-reverse(换行，第一行在下方)。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

---

3.3 flex-flow(适用于flex容器元素)

flex-direction 和flex-wrap两个属性的缩写，默认值为row nowrap.

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

---

3.4 justify-content属性

justify-content：定义项目在主轴上如何对齐。(左对齐、右对齐、居中对齐、两端对齐，项目之间间隔相等，项目两侧的间隔相等 )

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

---

3.5 align-items属性

align-items：定义项目在交叉轴上如何对齐。（左对齐、右对齐、居中对齐 、基线对齐、stretch为默认值，如果项目未设置高度或者高度为auto则占满整个容器的高度）

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

---

3.6 align-content属性

当伸缩容器的侧轴还有多余空间时，align-content属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的justify-content属性类似。（与交叉轴起点对齐，与交叉轴终点对齐，与交叉轴的中点对齐，两端对齐轴线之间间隔平均分布，每根轴线两侧的间隔都相等，默认值轴线占满整个交叉轴）

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

---

四、flex项目的属性

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;}

• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */}

• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
  }

• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main
  size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */}

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

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

参考博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html