html中Flex页面布局

1. Flex排序

display:flex;

flex-direction:column-reverse;//列，反序排列

flex-direction:column;//列

flex-direction:row-reverse;//行，反序排列

flex-direction:row； //行

2. Flex换行

display:flex;

flex-wrap:wrap;//自动换行

flex-wrap:nowrap;//不换行，默认不换行

flex-wrap；wrap-reverse//换行，反序排列

3. Flex左右布局

display:flex;

justify-content:center;//居中对齐

justify-content:space-between;//两端对齐

justify-content:flex-end;//居右对齐

justify-content:flex-start;//居左对齐

justify-content:space-around；//平均对齐

4. Flex上下布局

display:flex;

align-items:center;//上下居中

align-items:flex-stert;//上对齐

align-items:flex-end;//下对齐

align-items:stretch;//拉伸对齐

align-items:baseline;//字体在一行