Free Flex

原味的感觉 ORZ

效果 HTML

                
    <div>
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
    </div>

1

2

3

贴士：为了视觉效果更加直观，每个 div 子项都添加了一定的边框和背景颜色。下同

1、父容器上添加属性 data-flex=flex

效果 HTML

                    
    <div data-flex="flex">
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
    </div>

1

2

3

贴士：free-flex 选用属性选择器来做匹配 [data-flex~="flex"]，使用时请在每个标签内添加 data-flex 属性

2、子项按比列分配 flex1 ... flex12

效果 HTML

                
    <div data-flex="flex">
        <div data-flex="flex1"> 1 </div>
        <div data-flex="flex2"> 2 </div>
        <div data-flex="flex3"> 3 </div>
    </div>

                
    <div data-flex="flex">
        <div data-flex="flex6"> 6 </div>
        <div data-flex="flex12"> 12 </div>
    </div>

1

2

3

6

12

贴士：目前拥有12种属性值： flex1 flex2 ... flex11 flex12

3、flex 主轴方向：水平——从【左】到【右】，起点在左边 flex-row （默认）

效果 HTML

                    
    <div data-flex="flex flex-row">
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
    </div>

1

2

3

贴士：Flexbox 默认主轴是一条水平线，方向从左到右

4、flex 主轴方向：水平——从【右】到【左】，起点在右边 flex-row-reverse

效果 HTML

                
    <div data-flex="flex flex-row-reverse">
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
    </div>

1

2

3

5、flex 主轴方向：垂直——从【上】到【下】，起点在上方 flex-col

效果 HTML

                
    <div data-flex="flex flex-col">
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
    </div>

1

2

3

6、flex 主轴方向：垂直——从【下】到【上】，起点在下方 flex-col-reverse

效果 HTML

                
    <div data-flex="flex flex-col-reverse">
        <div> 1 </div>
        <div> 2 </div>
        <div> 3 </div>
    </div>

1

2

3

7、内容铺满是否换行：不换行 flex-nowrap （默认）

效果 HTML

                
    <div data-flex="flex flex-nowrap">
        <div> item 1 </div>
        <div> item 2 </div>
        <div> item 3 </div>
        <div> item 4 </div>
        <div> item 5 </div>
        <div> item 6 </div>
        <div> item 7 </div>
        <div> item 8 </div>
    </div>

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

贴士：本例设置了 max-width: 280px 和 overflow: hidden，添加 flex-nowrap 时，部分子项超出容器、被隐藏

8、内容铺满是否换行：换行 flex-wrap

效果 HTML

                
    <div data-flex="flex flex-wrap">
        <div> item 1 </div>
        <div> item 2 </div>
        <div> item 3 </div>
        <div> item 4 </div>
        <div> item 5 </div>
        <div> item 6 </div>
        <div> item 7 </div>
        <div> item 8 </div>
    </div>

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

贴士：本例设置了 max-width: 280px 和 overflow: hidden，添加 flex-wrap 时，子项被换行显示

9、内容铺满是否换行：换行并反向 flex-wrap-reverse

效果 HTML

                
    <div data-flex="flex flex-wrap-reverse">
        <div> item 1 </div>
        <div> item 2 </div>
        <div> item 3 </div>
        <div> item 4 </div>
        <div> item 5 </div>
        <div> item 6 </div>
        <div> item 7 </div>
        <div> item 8 </div>
    </div>

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

贴士：本例设置了 max-width: 280px，可以更容易看到 flex-wrap-reverse 效果

10、主轴对齐方式：开始 main-start 中间 main-center 末尾 main-end 围绕 main-around 两端 main-between

效果 HTML

                
    <div data-flex="flex main-start">
        <div> main-start </div>
    </div>

    <div data-flex="flex main-center">
        <div> main-center </div>
    </div>

    <div data-flex="flex main-end">
        <div> main-end </div>
    </div>

    <div data-flex="flex main-around">
        <div> main-end </div>
    </div>

    <div data-flex="flex main-between">
        <div> main-end </div>
    </div>

main-start

main-center

main-end

main-around

main-between

贴士：当使用 flex-col 或者 flex-col-reverse 改变主轴方向后，此时的主轴变成垂直线，侧轴变水平线。这点需要注意

11、侧轴对齐方式：开始 cross-start 中间 cross-center 末尾 cross-end 延伸 cross-stretch 文字基线对齐 cross-baseline

效果 HTML

                    
    <div data-flex="flex cross-start">
        <div> cross-start </div>
    </div>

    <div data-flex="flex cross-center">
        <div> cross-center </div>
    </div>

    <div data-flex="flex cross-end">
        <div> cross-end </div>
    </div>

    <div data-flex="flex cross-stretch">
        <div> cross-stretch </div>
    </div>

   <div data-flex="flex cross-baseline">
        <div style="font-size: 24px;">
            font size 24
        </div>
        <div style="font-size: 12px;">
            font size 12
        </div>
        <div style="font-size: 20px;">
            font size 20
        </div>
    </div>

cross-start

cross-center

cross-end

cross-stretch

font size 20

font size 12

font size 16

贴士：当使用 flex-col 或者 flex-col-reverse 改变主轴方向后，此时的主轴变成垂直线，侧轴变水平线。这点需要注意

12、侧轴对齐：写在子容器上开始 .self-start 中间 .self-center 末尾 .self-end

效果 HTML

                
    <div data-flex="flex">
        <div data-flex="self-start">
            self-start
        </div>
    </div>

    <div data-flex="flex">
        <div data-flex="self-center">
            self-center
        </div>
    </div>

    <div data-flex="flex">
        <div data-flex="self-end">
            self-end
        </div>
    </div>

self-start

self-center

self-end

贴士：和上例 cross-start cross-center cross-end 效果一样

13、主轴和侧轴同时居中： both-center

效果 HTML

                    
    <div data-flex="flex both-center">
        <div> both-center </div>
    </div>

both-center

1、放大比例（当子容器比父容器小，子容器应当如何放大） flex-grow-1 ... flex-grow-12

效果 HTML

                
    添加前
    <div data-flex="flex" >
        <div> flex-grow-1 </div>
        <div> flex-grow-2 </div>
        <div> flex-grow-1 </div>
    </div>

                    
    添加后
    <div data-flex="flex">
        <div data-flex="flex-grow-1">
            flex-grow-1
        </div>
        <div data-flex="flex-grow-2">
            flex-grow-2
        </div>
        <div data-flex="flex-grow-1">
            flex-grow-1
        </div>
    </div>

添加前

flex-grow-1

flex-grow-2

flex-grow-1

添加后

flex-grow-1

flex-grow-2

flex-grow-1

计算方法：
本例设置容器宽 280px，每个子元素宽 60px
父容器有剩余：
280 - ( 60 + 60 + 60 ) = 100 px ;
根据 flex-grow 比例放大的尺寸（每份）：
100 / ( 1 + 2 + 1 ) = 25 px ;
最终子元素宽度：
( 60 + 25 )px 、 ( 60 + 25*2 )px 和 ( 60 + 25 )px , 总共刚好 280 px
具体请 Chrome Developer Tools 看一下

贴士：目前拥有12种属性值，flex-grow-1 ... flex-grow-12

2、缩小比例（当子容器比父容器大，子容器应当如何缩小） flex-shrink-1 ... flex-shrink-12

效果 HTML

                
    添加前：
    <div data-flex="flex">
        <div> flex-shrink-1 </div>
        <div> flex-shrink-2 </div>
        <div> flex-shrink-1 </div>
    </div>

                
     添加后
     <div data-flex="flex">
        <div data-flex="flex-shrink-1">
            flex-shrink-1
        </div>
        <div data-flex="flex-shrink-2">
            flex-shrink-2
        </div>
        <div data-flex="flex-shrink-1">
            flex-shrink-1
        </div>
    </div>

添加前

flex-shrink-1

flex-shrink-2

flex-shrink-1

添加后

flex-shrink-1

flex-shrink-2

flex-shrink-1

计算方法：
本例设置容器宽 280px，每个子元素宽 120px
子容器超出父容器：
( 120 + 120 + 120 ) - 280 = 80 px ;
根据 flex-shrink 比例缩小的尺寸（每份）：
80 / ( 1 + 2 + 1 ) = 20 px ;
最终子元素宽度：
( 120 - 20 )px 、 ( 120 - 20*2 )px 和 ( 120 - 20 )px , 总共刚好 280px
具体请 Chrome Developer Tools 看一下

贴士：目前拥有12种属性值，flex-shrink-1 ... flex-shrink-12

3、多列对齐：当伸缩容器的侧轴还有多余空间时，如何对齐 content-start content-center content-end content-stretch content-between content-space-around

效果 HTML

                    
    <div data-flex="flex flex-wrap content-start">
        <div> content-start </div>
        ...
        <div> content-start </div>
    </div>

    <div data-flex="flex flex-wrap content-center">
        <div> content-center </div>
        ...
        <div> content-center </div>
    </div>

    <div data-flex="flex flex-wrap content-end">
        <div> content-end </div>
        ...
        <div> content-end </div>
    </div>

    <div data-flex="flex flex-wrap content-stretch">
        <div> content-stretch </div>
        ...
        <div> content-stretch </div>
    </div>

   <div data-flex="flex flex-wrap content-between">
        <div"> content-between </div>
        ...
        <div"> content-between </div>
    </div>

    <div data-flex="flex flex-wrap content-space-around">
        <div> content-space-around </div>
        ...
        <div> content-space-around </div>
    </div>

content-start

content-center

content-end

content-stretch

content-between

content-space-around

贴士：本例设置了父容器最大宽度 280px，大屏幕用户更容易看到效果。
含 content-* 的类会在元素上添加相应的 align-content 属性和值，但 align-content在只有一行的伸缩容器上没有效果，所以本例同时加上 flex-wrap 让子元素换行。