css笔记2：flexbox

web端弹性盒子知识点

弹性容器属性

flex-direction

值：row | row-reverse | column | column-reverse
默认：row

flex-wrap

“flex-wrap”属性控制了容器为单行还是多行。如果允许换行，这个属性允许你控制行的堆叠方向。
值：nowrap | wrap | wrap-reverse
默认：nowrap
nowrap：flex 的元素被摆放到到一行，这可能导致溢出 flex 容器
wrap：flex 元素 被打断到多个行中
wrap-reverse：flex 元素 被打断到多个行中,start和end调换

flex-flow

“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。
默认值：row nowrap

justify-content弹性盒子对齐方式

“justify-content”属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。
值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start

align-items弹性元素对齐

同上，是侧轴。。“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）
值：flex-start | flex-end | center | baseline | stretch 默认值：stretch

align-content弹性元素内容对齐

“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。
默认值：stretch
align-self弹性元素自对齐
用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。
值：auto | flex-start | flex-end | center | baseline | stretch
默认值：auto

弹性元素属性

order

弹性盒子顺序
“order”属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
默认值 0

flex-grow

弹性盒子增长
“flex-grow”属性定义弹性盒子项（flex item）的拉伸因子，不接受负值。等同于我们在react-native中设置的flex值
默认值：0

flex-shrink

弹性盒子收缩
“flex-shrink”属性设置了收缩因数，不接受负值。
默认值：1

flex-basis

弹性盒子伸缩
“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
值：类似“width”，即width能用的值这里都能用 默认值：auto