控制Flex子元素在主轴上的比例的方法

背景

flex布局更有效的实现对齐，空间分配。最近又学习下flex子元素的尺寸计算规则，主要是

flex-grow

flex-shrink

一、基本概念

1.1 主轴(Main axis)

定义了flex元素布局起始点和方向，flex子元素在主轴上依次放置。

主轴有4个方向，通过

flex-direction

row

水平方向，从左到右，默认的

row-reverse

水平方向，从右到左

column

垂直方向，从上到下

column-reverse

垂直方向，从下到上

1.2 主轴的尺寸（Main axis size）

就是flex容器content矩形（不包含padding, border, margin区域）在主轴方向的尺寸。

1.3 交叉轴（Cross axis）

交叉轴就是跟主轴锤子的方向，主要用于flex元素的对齐。

1.4 交叉轴的尺寸（Cross axis size）

就是flex容器content矩形（不包含padding, border, margin区域）在Cross轴方向的尺寸。

1.5 flex盒模型（flex box）

display为

flex

inline-flex

1. flex容器包含的不仅是flex元素，也包含空白空间。

2. 涉及的CSSflex-directionflex-wrapflex-flow

flex-direction
flex-wrap
flex-flow

flex-direction和 flex-wrap的简写。

justify-content

控制flex容器内容（flex元素和空白空间）在主轴方向对齐。注意区分align-items。

align-content

控制多行flex容器个行的对齐方式。

align-items

控制flex容器内容（flex元素和空白空间）在交叉轴方向对齐。

Tip：

1、这些CSS属性都是有相关性的：

首页先指定flex容器的主轴方向(flex-direction), 如果flex子元素超过在主轴 尺寸，那就涉及是否换行（flex-wrap）。如果没有超过主轴尺寸，那就涉及行内对齐（justify-content）, 如果存在多行每个行直接也要对齐（align-content）。

2、可能比较容易混淆 justify-content，align-content，align-items。

记住content是指flex元素和空白空间，items指的是flex元素。这样就容易就是这三个属性的用处了。

1.6 flex元素(flex items)

1. 语法

flex box的子元素，不包含流外子元素（ absolute, fix元素），但是包含float元素。

flex子元素相邻的margin不会发生合并。

float元素作为flex子元素时，float属性无效（因为要参与flex布局，不是流式布局）。