android 三栏布局,一次性搞懂flex布局

Flex布局

在传统的方式中，我们通常使用display、position、float等属性进行布局，对于一些特殊不记录运行起来不是很方便，比如垂直居中，如果运用了浮动特性的话，就需要清除浮动，不但比较麻烦，一不小心还会出现意料之外的布局，最后呈现的结果往往不尽人意

Flexbox(全称Flexible Box)布局，也叫Flex布局，意为‘弹性布局’，顾名思义，Flex布局中的元素具有可伸缩性，是的，通过设置父元素的display属性为display：flex|inline-flex;其子元素便有了伸缩性，即使在子元素的宽高不确定的情况下，也能通过设置相关css属性来决定资源安苏的对齐方式、所占比例和空间分布

一些概念

在开始学习Flex布局前，我们先来熟悉下有关Flex布局的几个概念，这些概念可以帮助我们对后文的理解。

(基本概念预览，图来源于网络)

上面便是一个Flex布局的大致架构了，图中的囊括概念有几点：

Flex布局是一整个模块，其中父元素称为flex container，意为容器；子元素称为flex item，意为项目；

Flex布局中有两条看不见的轴线，主轴(main axis)和交叉轴(cross axis)。默认的主轴是水平的，交叉轴是垂直于主轴的；

主轴开始的位置叫main start，结束位置叫main end；交叉轴的开始位置叫cross start，结束位置叫cross end；

子元素在主轴方向上的大小称为main size，在交叉轴方向上的大小称为cross size。

在上面的概念中，比较重要的是主轴、交叉轴，和他们的开始位置、结束位置。子元素在父元素中会沿着主轴从main start到main end排列，沿着交叉轴从cross start 到 cross end 排列。在常规的布局中，浏览器是从左到右排列，挤不下就换行，在这种情况下，主轴是水平方向，交叉轴是垂直方向，主轴是从左到右，交叉轴从上到下。

在Flex布局中，默认的主轴方向也是水平的，交叉轴是垂直的，通过改变flex-direction和flex-wrap的属性值可以分别改变两个轴的方向和他们开始的位置、起始位置，这就让布局更加灵活多变了

了解完Flex布局相关的抽象概念，接下来我们来看看有关Flex布局的属性部分，这里分为两部分介绍，一时作用于父元素(容器)的，二是作用于子元素(项目)的。

容器属性

display属性用来将父元素定义为Flex布局的容器，设置display值为display：flex容器对外表现为块级元素；display：inline-flex，容器对外表现为行内元素，对内两者表现是一样的。

复制代码.container{

display: flex | inline-flex;

}

复制代码

上面代码就定义了一个Flex布局的容器，我们有以下六个属性可以设置在容器上

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

flex-direction定义了主轴的方向，即项目的排列方向

1

2

3

4

复制代码.container {

flex-direction: row | row-reverse | column | column-reverse;

}

复制代码row(默认值)：主轴在水平方向上，起点在左侧，也就是我们常见的从左向右

row-reverse：主轴水平方向，起点在右侧

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

column-reverse：主轴在垂直方向，起点在瞎眼2

(flex-direction为row)

(flex-direction为row-reverse)