欢迎关注！

flex弹性容器和弹性元素

通过设置元素的display属性值为flex，就可以将该元素设置为弹性容器（flex container），该元素的在文档流中的子元素自动成为弹性容器中的成员，成为弹性项目（flex item）。

弹性容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。弹性项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex方向

flex方向主要有四个相关属性

flex-direction用于设置弹性项目的排列方向。取值为row时项目自左向右排列，取值为row-reverse时项目自右向左排列，取值为column项目自上向下排列，取值为column-reverse时项目自下向上排列。

flex-wrap用于设置弹性项目的换行显示方式。取值为no-wrap时默认为不换行显示，取值为wrap时项目自动向下或向右换行显示，取值为wrap-reverse时项目自动向上或向左换行显示。

flex-flow为flex-wrap与flex-direction的简写方式。

order用于设置弹性项目在容器中的显示位置，取值为整数，默认值为0，order值大的弹性项目自动向后排列。

flex弹性

flex弹性主要有四个相关属性

flex-basis用于设置弹性项目的初始宽或高（并作为弹性的基础）。flex-direction取值为row时设置宽，取值为column则设置高。语法为flex-basis：main-size\<width>。

flex-grow用于设置弹性项目可用剩余空间的比例，也称伸展因子，是flex弹性布局中最重要的元素之一。弹性容器（flex-container）先按照flex-basis中设定的宽度进行布局，如果有剩余空间，再按照flex-grow中设定的比例进行分配。

flex-shrink用于将弹性项目超出容器的部分按照比例在已有容器空间中进行缩减。

flex为以上三个属性的合写属性，即可以在flex中同时设置以上三个值。语法为flex：<'flex-grow'>||<'flex-shrink'>||<'flex-basis'>，默认值为：0 1 main-size；即不分配剩余空间，按比例同时缩小弹性项目以适应容器，弹性项目宽度或高度为所占据的主轴空间。

flex对齐

flex对齐主要有四个相关属性

justify-content用于设置主轴（main-axis）上的对齐方式。弹性元素依据主轴定位，所以不能使用left与righ，因为位置是相对的。（相似属性为text-align）。justify-content默认取值为flex-start，表示左对齐或上对齐；取值为flex-end表示右对齐或下对齐；取值为center在主轴上居中对齐；取值为space-between表示两端对齐；取值为space-around表示每个项目两侧的间隔相等，项目之间的间距是项目与边框的间距的2倍。

align-items用于设置辅轴（cross-axis）上的对齐方式。（相似属性为vertical-align），align-items取值为flex-start，表示左对齐或上对齐；取值为flex-end表示右对齐或下对齐；取值为center在辅轴上居中对齐；取值为baseline表示与项目的第一行文字的基线对齐；取值为stretch（默认值）表示如果项目未设置高度或设为auto，将占满整个容器的高度。

align-self用于设置单个弹性项目（flex-item）在辅轴（cross-axis）上的对齐方式，justify-content和align-items都是设置弹性容器中整体弹性项目的对齐方式，而align-self针对的是单个弹性项目。

align-content用于设置定义了多根轴线的对齐方式。比如在使用到换行时，多行的对齐方式。取值和含义与justify-content和align-items相同，只是无法取到align-items中的baseline值。

收藏转发请先关注，谢谢支持！