Flex布局个人总结本文仅是个人代码总结，不追求“功名利禄”，网络喷子请远离！！！flex布局语法总结1，开启flexb

本文仅是个人代码总结，不追求“功名利禄”，网络喷子请远离！！！

flex布局语法总结

1，开启flexbox

disply:flex(块级) | inline-flex(行内块)

display:flex

2，确定主轴方向

flex-direction:row(从左到右，默认) | row-reverse（从右到左） | column（从上到下） | column-reverse（从下到上）;

flex-direction: row;

3,是否开启换行

flex-wrap:nowrap (不换行，默认) | wrap (开启换行) | wrap-reverse(从下到上换行);

flex-wrap: nowrap;

flex-flow(flex-direction和flex-wrap的合集)

flex-flow:flex-direction || flex-wrap;

4,justify-content:沿主轴方向的对齐方式

justify-content: space-around

5,align-items:定义沿交叉轴的排布方式

align-items:flex-start(开始位置) | flex-end(结束位置) | center(居中) | baseLine(按照文字基线对齐) | stretch(拉伸flex填充整个容器，默认)

align-items: stretch

当开启换行时且有多行align-items失效，使用align-content

align-content:flex-start(开始位置) | flex-end(结束位置) | space-around | space-between | stretch(默认)

align-content:space-around

6,flex-grow定义flex项在可用空间下的拉伸比例默认0

flex-grow:number; number是1则平分剩余空间

flex-grow: 1;

7,flex-basis:定义flex的默认大小

flex-basis:auto(按照flex本来大小显示) | length

flex-basis: 50px;

flex:flex-grow,flex-shrink,flex-basis的合集缩写

flex:none | [<flex-grow><flex-shrink> ? || <flex-basis>]

8，order控制flex的显示顺序，数值越大越靠后

order:number;默认 1

order: 2

9,align-self:单独设置摸一个flex的对齐方式

align-self: center

使用flex实现水平垂直居中

flex 容器中设置 margin 为 auto 会自动吸收额外空间

.parent {
    display: flex;
    height: 300px;
    /* 随意设定大小 */
}

.child {
    width: 100px;
    /* 随意设定大小，比父元素要小 */
    height: 100px;
    /* 同上 */
    margin: auto;
    /* 见证奇迹的时刻 */
}

Flex布局个人总结