Flexbox-Day02-Alignment

發表於

Flexbox-Day02-Alignment

『一分耕耘，一分收穫』，工作不只是為了錢，報酬多少，要用功，加上品質，還要有成就感 - 王永慶

WHAT THEFLEXBOX?!

  • A simple, free 20 video course that will help you master CSS Flexbox!

Alignment

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 6.Flexbox Alignment and Centering with justify-content*/
/* justify-content: flex-start / flex-end / center / space-between / space-around */
    justify-content: space-around;

/* 7.Alignment and Centering with align-items*/
/* align-items: flex-start / flex-end / center / stretch / baseline */
    align-items: baseline;

/* 8.Alignment and Centering with align-content*/
/* align-content: flex-start / flex-end / center / space-between / space-around */
    align-content: center;

/* 9.Alignment and Centering with align-self */
/* align-self: flex-start / flex-end / center / stretch / baseline */
    align-self: center;

Proportion

1
2
3
4
5
6
7
8
/* 10.Understanding Flexbox sizing with the flex property */
    flex: 2;

/* 11.Finally understanding Flexbox flex-grow, flex-shrink and flex-basis */
/* flex: 10 10 400px; */
 flex-grow: 10; /*伸展比*/
 flex-shrink: 10; /* 收縮比 */
 flex-basis: 400px; /* 絕對值 */