弹性盒布局

display:flex可以定义弹性盒容器,表示所有元素以块级样式存在

display:inline-flex表示以行内块存在

flex-wrap可以通过换行解决弹性元素溢出问题 有wrap wrap-reverse两个值

flex-direcition可以使弹性元素垂直排列 有:row column row-reverse column-reverse四个值

display & flex-wrap & flex-direction

11111
22222
33333
44444
55555

11111
22222
33333
44444
55555

row,row-reverse主轴横向 改变方向

column,column-reverse主轴竖向 改变方向

wrap,wrap-reverse改变垂轴方向

一共有四种情况

aaa bbb

justify-content可以改变弹性元素在主轴上的的对齐方式

ccc

justify-content:

1111111
2222222
3333333
4444444
5555555
6666666
7777777

align-items可以改变弹性元素在垂轴上的的对齐方式

ddd

align-items & align-self:

1111111
2222222
2222222
3333333
3333333
3333333
4444444
4444444
4444444
4444444
5555555
5555555
5555555
5555555
5555555
6666666
6666666
6666666
6666666
6666666
6666666
7777777
7777777
7777777
7777777
7777777
7777777
7777777

基线是最大字体的下划线位置的线

align-self单单改变某个弹性元素的垂轴对齐方式

eee

align-content指定多行元素在垂轴上的对齐方式

fff ggg

align-items和align-content的区别是align-items是以弹性元素里的内容为单位,align-content是以一整行弹性元素对齐

align-items:

one
two
three
three
four
five

align-content:

one
two
three
three
four
five

order可以安排每一个元素的显示顺序,默认情况下所有元素order为0

order:

one
two
three
four
five

当弹性盒容器宽度被写死,元素即将发生溢出时,flex-shrink可以控制每个弹性元素被压缩的比例

flex-shrink默认值为1

flex-shrink:

one
two
three
four
five

当一个元素缩小的不能再小的时候就不会再缩小了

flex-grow可以定义弹性容器有多余空间时,弹性元素该如何放大

flex-grow的默认值为0

flex-grow:

one
two
three
four
five

flex-basis可以确定弹性元素在主轴上的初始值

flex-basis:

one
two
three
four
five

flex是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto

弹性元素的特征

2025促销:香港特价空间,最低仅需20元,可永久使用!
本站空间由 三维免费空间 友情提供