Flex布局

一、Flex布局的概念与基础概括

flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置“display:flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效；

Flex布局中主要包含了以下五个概念：

1. 弹性容器（flex container）：采用Flex布局的外层容器。

2. 弹性项（flex item）：容器中的子元素。

3. 主轴（main axis）： 弹性容器的水平或垂直方向。

4. 交叉轴（cross axis）：与主轴垂直的方向。

5. 对齐方式（align）：设置弹性项在弹性容器内的对齐方式。

二、 Flex弹性布局基本使用

1.0初步认识

1. Flex弹性布局属于H5内容，相对于传统的浮动布局显得更加灵活。
2. 注意：Flex布局的子元素如果一行放满不会自动换行，会压缩子元素的宽度width。

flex布局的相关概念

弹性盒模型

弹性盒模型(Flexible Box模型)，也被成为flexbox，是一种一维的布局模型(也就是说一次只能处理一个维度上的元素布局，一行或者一列)。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。

主轴和交叉轴

主轴和交叉轴是两根互相垂直的线。可以用flex-direction设置主轴(设置为row或者column)。那么交叉轴就是垂直于主轴的线。

需要注意的是：一旦设置主轴方向，那么关于flex容器上的盒子的属性都是基于主轴的。

起始线和终止线

起始线和终止线是基于轴线的，主轴和交叉轴都有起始线和终止线。如果flex-direction的方向是row，那么主轴起始线就是左边，终止线就是右边，交叉轴的起始线就是上边，终止线就是下边。如果flex-direction的方向是row-reverse，那么主轴起始线就是右边，终止线就是左边，交叉轴的起始线就是上边，终止线就是下边。如果flex-direction的方向是column，那么主轴起始线就是上边，终止线就是下边。交叉轴起始线就是左边，终止线就是右边。如果flex-direction的方向是column-reverse，那么主轴起始线就是下边，终止线就是上边。交叉轴起始线就是左边，终止线就是右边。

flex容器

采用了flexbox的区域就叫做flex容器。也就是说只要元素的display设置为flex或者inline-flex，那么它就是flex容器。它的所有子元素就是flex元素。

flex元素具有的默认特征：

• 元素排列为一行(flex-direction的初始值是row)
• 元素从主轴的起始线开始
• 元素不会在主轴方向拉伸，但是可以缩小
• 元素被拉伸来填充交叉轴大小
• flex-basis属性为auto
• flex-wrap属性为nowrap

三、容器的属性

容器的6个属性：

flex-flow：该属性作用于弹性盒容器，用于控制容器内元素的排列方向和换行方式，该属性是一个复合属性，由flex-direction和flex-wrap组成；

flex-direction：指定弹性盒子内子元素的排列方向；

flex-wrap：指定弹性盒子内子元素的换行方式；

justify-content：该属性作用于弹性盒容器内的子元素，用于控制该子元素自身在排列方向上的分布方式；

align-items：该属性作用于弹性盒容器，用于控制弹性盒内所有子元素在排列方向的垂直方向上的对齐方式；

align-content：该属性作用域弹性盒容器，用于控制弹性盒内行的分布方式；

3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

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

flex-direction属性有4个值

row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。

 

 

 

3.2 flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

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

flex-wrap属性有3个值

• nowrap（默认）：不换行（列）。
• wrap：主轴为横向时：从上到下换行。主轴为纵向时：从左到右换列。
• wrap-reverse：主轴为横向时：从下到上换行。主轴为纵向时：从右到左换列。

换行（列）时，项目还按照主轴方向排列。

 

 

3.3 flex-flow

flex-flow属性是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;
}

 justify-content属性有5个值

flex-start（默认）：与主轴的起点对齐。
flex-end：与主轴的终点对齐。
center：与主轴的中点对齐。
space-between：两端对齐主轴的起点与终点，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

 

 

 

 

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。纵向交叉轴始终自上而下，横向交叉轴始终自左而右。

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

align-items属性有5个值

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

 

 

 

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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

align-content属性有6个值

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：主轴线占满整个交叉轴。

 四、项目的属性

设置在项目上的6个属性。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 order属性

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

.item {
  order: <integer>;
}

 如果不给项目设置order值，默认值为0，那么项目的顺序按照结构顺序排列。

4.2 flex-grow属性

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

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

 注意：如果所有项目的flex-grow属性都为1，那么他们将等分剩余空间（如果存在剩余空间的话）；如果一个项目的flex-grow属性为2，其他项目都为1，则前者（属性为2的）占据的剩余空间将比其他项多一倍；

每个项目分配空间计算公式：

div0：不放大，即不被分配剩余空间

div2：3 / (3 + 1) * 剩余空间 = 3 / 4 * 剩余空间

div2：1 / (3 + 1) * 剩余空间 = 1 / 4 * 剩余空间

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。如果flex-shrink值为0，表示该项目不收缩。

当子元素宽度和大于父元素宽度时，flex-shrink 将会按照一定的比例进行收缩，即将子元素宽度之和与父元素宽度的差值按照子元素flex-shrink值来分配给各个子元素，指定各个子元素收缩多少，每个子元素原本宽度减去按比例分配的值，其剩余值为收缩完的实际宽度。

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

  注意：如果所有项目的flex-sharink属性都为1，当空间不足时，都将等比例缩小；如果一个项目的flex-shrink属性为0，其它项目都为1，则空间不足时，前者（属性为0）不缩小。负值对该属性无效。

4.4 flex-basis属性

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

注意：它可以设置根width或height属性一样的值（如200px），则项目将占据固定空间；

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

4.5 flex属性

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

注意：该属性有两个快捷值：auto(1 1 auto)和none(0 0 auto)。建议优先使用这个属性，而不是单独些三个分离的属性，因为浏览器会推算相关值影响渲染；

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

4.6 align-self属性

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

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

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