Flexbox布局模式学习乐园

Flexbox布局模式给网页布局提供了极大的方便，它更grid布局一样都是新出现的新型布局模式，为了让web开发者更容易的理解这种布局，本页内容提供了一个学习实验flexbox布局的场所，让大家更快更容易的了解flexbox布局的语法、用法和使用场景

flex 容器元素相关属性

flex-direction ( property of the flex container )

1

2

3

4

5

flex-wrap ( property of the flex container )

1

2

3

4

5

align-items ( property of the flex container )

1

2

3

4

5

justify-content ( property of the flex container )

1

2

3

4

5

align-content ( property of the flex container )

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

flex 子元素相关属性

align-self ( property for flex items )

1

2

3

4

5

flex-grow ( property for flex items )

1

2

3

4

5

flex-shrink ( property for flex items )

1

2

3

4

5

flex ( property for flex items )

.item { flex: flex-grow [flex-shrink] [flex-basis]; }

elemento 1elemento 2

1

2

order ( property for flex items )

1

2

3

4

5

posted by webhek