一、概念

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

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

二、开启flex布局

display:flex  块级元素

dispaly:inline-flex 行内元素

flex: flex container 以block-level 形式存在

line-flex : flex container 以inline-level 形式存在

三、父容器 flex container属性

flex-flow ：

flex-direction：决定主轴方向 

        row默认(从左到右)

        row-reverse(从右到左)

        column(从上到下)

        column-reverse(从下到上)

        操作：

flex-wrap：

justify-content：决定flex items 在main axis主轴上的对齐方式

       flex-start 默认值（与main start对齐）

        flex-end：与main end 对齐

        center ：居中对齐

        space-between：flex items之间的距离相等 与main start/main end 两端对齐

        space-evenly：flex items之间的距离相等 与main start/main end 之间的距离等于flex items之间的距离

        space-around：flex items之间的距离相等 与main start/main end 之间的距离是flex items之间距离的一半

                操作：

align-items：

align-content：

四、flex items属性

flex

flex-grow

flex-basis

flex-shrink

order

align-self