CSS 3 Flex布局

Flex布局

flex布局可以实现空间自动分配自动对齐，适用于简单的线性布局。

flex基本概念

flex基本概念

1. flex container的属性

• flex-direction 方向（row和column）
• flex-wrap 换行（默认nowrap,设置wrap后换行）
• flex-flow 方向和换行的简写
• justify-content 主轴(main axis)方向对齐方式（space-between,space-around,flex-starr,flex-end,center）
• align-item 侧轴对齐方式 (stretch,flex-start,flex-end,center)
• align-content 多行/列内容对齐方式（不常见）

`2. flex item属性

• flex-grow 增长比例（空间过多时）
• flex-shrink 收缩比例（空间不够时）
• flex-basis 默认大小（一般不用）
• flex 上面三个的缩写
• order 顺序（代替双飞翼）
• align-self自身对齐方式

使用flex布局

• 手机页面布局（topbar+main+tabs）

    
header
    
main
    

        

            

            

            

            

        
    

• 产品列表（li*9）

• PC页面布局

header

    
left
    
main
    
right

footer

• 完美居中

    

        jdashfjasdfah覅好僵啊时代峰峻爱世界净空法师大恒科技凤凰健康设计费