flex弹性布局笔记

Flex容器的6个属性:

1.flex-direction:决定主轴的方向

row(默认) 水平,起点在左端
row-reverse 水平,起点在右端
column:垂直,起点在上沿
column-reverse:垂直,起点在下沿

2.flex-wrap:决定一条轴线放不下,如何换行

Nowrap(默认) 不换行
Wrap:换行,第一行在上面
Wrap-reverse:换行,第一行在下面

3.flex-flow:是上面两个属性的简写

默认值是 row nowrap

4.justify-content:定义项目在主轴上的对齐方式

Flex-start(默认值)左对齐
Flex-end 右对齐
Center 居中
Space-between:两端对齐,项目之间的间隔都相等
Space-around:每个项目之间的间隔相等,所以项目之间的间隔比项目与边框之间的间隔大一倍

5.align-items:定义项目在交叉轴上如何对齐

Flex-start 交叉轴的起点对齐
Flex-end 交叉轴的终点对齐
Center:交叉轴的中点对齐
Baseline:项目的第一行文字的基线对齐
Stretch (默认值)如果项目未设置高度或者设为auto,将占满整个容器的高度

6.align-content:定义多跟轴线对齐方式,一条轴线该属性不起作用

Flex-start: 与交叉轴的起点对齐
Flex-end 与交叉轴的终点对齐
Center:与交叉轴的中点对齐
Space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布
Space-around:每根轴线之间的间隔都相等,所以轴线之间的间隔比轴线与边框之间的间隔大一倍

Flex项目的6个属性:

1.order:定义项目的排列顺序,数值越小,排列越靠前

默认0

2.flex-grow:定义项目的放大比例,如果存在剩余空间,不放大

默认0(如果所有项目的flex-grow属性为1,则等分剩余空间)

3.flex-shrink:定义项目的缩小比例

默认1 负值对该属性无效

4.flex-basis:定义在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性来计算主轴是否有多余空间

默认auto,即项目本来大小

5.flex:是上面三个的简写

默认值 0 1 auto 后两个值可选

6.align-self:允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性

默认值auto 表示继承父元素的align-items属性,如果没有父元素,则等同于 stretch

常用方法

/*开启felx布局,元素环绕,垂直居中*/
.flexbox1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/*开启felx布局,元素两边对齐等分间隔,垂直居中*/
.flexbox2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*子元素等分占据所有空间*/
.flex1{
    flex:1;
}

相关推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫,分享到朋友圈

flex弹性布局笔记
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close