父级开启弹性盒子模型:
display:flex
排列方向:
flex-direction:row/row-reverse/column/column-reverse
主轴布局:
justify-content:center/flex-start/flex-end/space-between/space-around
副轴布局:
align-items:center/flex-start/flex-end
多行排列:
align-content:center/flex-start/flex-end/stretch
是否换行:
flex-wrap:wrap/nowrap
align-content:
用于批改 flex-wrap 属性的行为。相似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。
子级配置:flex 是 flex-grow、flex-shrink、flex-basis 三个属性的简写,具体如下:
flex-grow:必填,设置我的项目绝对于其余我的项目的增长量,默认为 0;flex-shrink:选填,设置我的项目绝对于其余我的项目的膨胀量,默认为 1;flex-basis:选填,我的项目的长度,可设为: auto(默认值,主动)、inherit(从父元素继承该属性值)或以具体值加 "%"、"px"、"em" 等单位模式。
flex: auto | initial | none | inherit | [flex-grow] || [flex-shrink] || [flex-basis]
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none:计算值为 0 0 auto
inherit:从父元素继承
[flex-grow]:定义弹性盒子元素的扩大比率。[flex-shrink]:定义弹性盒子元素的膨胀比率。[flex-basis]:定义弹性盒子元素的默认基准值。