flex布局

一 认识flex布局

1. flex是目前web开发中使用最多的布局方案
2. 两个重要概念

• 开启了flex布局的元素叫flex container

• flex container 里面的直接子元素叫做flex items

• 通过display:flex或者display：inline-flex开启flex布局

flex container上的CSS属性：

flex-flow, flex-direction, flex-wrap, justify-content, align-items, align-content

flex items上的CSS属性：

flex, flex-grow, flex-basis, flex-shrink, order, align-self

二 flex container上的属性详解

2.1 flex-direction:决定主轴的方向

row 主轴从左到右

row-reverse 主轴从右到左

column 主轴从上到下

column-reverse 主轴从下到上

2.2 justify-content:决定了flex items在主轴上的对齐方式

    justify-content:flex-start  主轴start方向对齐 

    justify-content:flex-end  主轴end方向对齐

    justify-content:center  居中对齐

    justify-content:space-between  

    justify-content:space-evenly

    justify-content:space-around

2.3 align-items:决定flex-items在交叉轴的对齐方式

normal

                (弹性布局和stretch一样)                                     （指定高度，不拉伸）

flex-end

center

baseline （按文字首行对齐）

2.35 结论：默认情况下，所有flex items都会在同一行显示

flex-wrap默认值为nowrap（不换行）

2.4 flex-wrap 控制flex items换行

2.4.1 nowrap（默认）:单行（收缩）

wrap:多行

wrap-reverse:多行（对比wrap,cross start cross end反转）

2.5 flex-flow flex-direction和flex-wrap的缩写属性

2.6 align-content

三 flex items上的属性详解

3.1 order

    确定各item的排列顺序，可以设置任意整数，序号小的在前面

3.2 align-self

    覆盖父元素align-items的设置，改变自身的对齐方式

3.3 flex-grow

3.4 flex-shrink

3.5 flex-basis

3.6 flex：flex-grow flex-shrink flex-basis的简写