Flex写法系列-Flex布局之基本语法

以前的传统布局，依赖盒装模型。即 display + position + float 属性。但是对于比较特殊的布局就不太容易实现，例如：垂直居中。下面主要介绍flex的基本语法。

一、什么是Flex布局？

Flex布局个人理解为弹性盒子，为盒装模型带来了很大的灵活性，方便开发人员。

Flex布局基本使用如下：

.container{
  display:flex;
}

行内元素的使用：

.container{
  display:inline-flex;
}

针对WebKit内核的浏览器(Chrome就是该内核的浏览器之一)，要加上-webkit的前缀

.container{
  display:flex;
  display:-webkit-flex;
}

二、Flex布局的基本概念

如图。最外层的元素称为flex容器。所有子元素为容器成员，称为flex item。简称 “项目”。

容器内有两条轴，主轴和交叉轴。项目默认沿着主轴排列。占据的主轴空间叫main size，占据的交叉轴空间 cross size

三、Flex布局之容器属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.1 flex-direction

决定主轴的方向。即项目的排列方向。

.container{
    flex-direction:row | row-reverse | column | column-reverse
}

row(默认值)：主轴为水平方向，起点在左
row-reverse：主轴为水平方向，起点在右
column：主轴为垂直方向，起点在上
column-reverse：主轴为垂直方向，起点在下

3.2 flex-wrap

默认项目在一条线。flex-wrap属性定义轴线排不下，怎么换行

.container{
    flex-wrap:nowrap | wrap | wrap-reverse
}

nowrap（默认值）：不换行
wrap：换行，第一行在上
wrap-reverse：换行，第一行在下

3.3 flex-flow

是flex-direction和flex-wrap的简写形式。默认值为 row nowrap

.container{
    flex-flow:flex-direction || flex-wrap 
}

3.4 justify-content

定义了主轴的对齐方式

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

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐
space-around：项目两侧距离相等

3.5 align-items

定义了交叉轴的对齐方式

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

flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴终点对齐
baseline：项目第一行文字对齐
stretch（默认值）：项目如果未设置高度或者auto，将占满整个容器的高度

四、Flex布局之项目属性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

4.1 order

排列顺序。值越小，越在项目前面

.item{
    order:1 | 2 | ....;
}

4.2 flex-grow

定义了项目的放大比例，默认为0。即如果存在剩余空间，也不放大

.item{
    flex-grow:1 | 2 | ....;
}

如果所有子元素都是1，那么会等分剩余项目空间，如果其中一个是2，那么它所占的剩余空间比其他元素多一倍

4.3 flex-shrink

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

.item{
    flex-shrink:1 | 2 | ....;
}

如果所有子元素都是1，那么空间不足时，都会缩小。如果其中一个为0，其他元素为1，空间不足时，前者不缩小

4.4 flex-basis

定义了分配多余空间之前，项目占据的主轴空间。默认值为auto，即项目的实际大小

.item{
    flex-basis: length | auto;
}

4.5 flex

是flex-grow、flex-shrink、flex-basis的简写。默认 0 1 auto。

.item{
    flex: flex-grow | flex-shrink | flex-basis
}

有两个常用快捷值：auto( 1 1 auto)、none( 0 0 auto)

4.6 align-self

单个子元素可以和其他子元素有不同的排列方式，比align-items优先级高。默认值auto

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