阅读 47

Flex布局个人总结

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

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:flex-start(从开始位置,默认) | flex-end(从结束位置) | center(居中排布) | space-between(两端对齐) | space-around(均匀分布) | space-evenly(两个flex项间距相等)

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:auto | flex-start | flex-end | center | baseline | stretch

align-self: center

使用flex实现水平垂直居中

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

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

.child {
    width: 100px;
    /* 随意设定大小,比父元素要小 */
    height: 100px;
    /* 同上 */
    margin: auto;
    /* 见证奇迹的时刻 */
}
复制代码
关注下面的标签,发现更多相似文章
评论