| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .flexbox { | 4 .flexbox { |
| 5 position: relative; | 5 position: relative; |
| 6 display: flex; | 6 display: flex; |
| 7 background-color: grey; | 7 background-color: grey; |
| 8 max-width: 100px; | 8 max-width: 100px; |
| 9 align-content: flex-start; | 9 align-content: flex-start; |
| 10 } | 10 } |
| 11 .flexbox > * { | 11 .flexbox > * { |
| 12 flex: none; | 12 flex: none; |
| 13 } | 13 } |
| 14 .title { | 14 .title { |
| 15 margin-top: 1em; | 15 margin-top: 1em; |
| 16 } | 16 } |
| 17 .ltr { | 17 .ltr { |
| 18 direction: ltr; | 18 direction: ltr; |
| 19 } | 19 } |
| 20 .rtl { | 20 .rtl { |
| 21 direction: rtl; | 21 direction: rtl; |
| 22 } | 22 } |
| 23 .horizontal-tb { | 23 .horizontal-tb { |
| 24 -webkit-writing-mode: horizontal-tb; | 24 -webkit-writing-mode: horizontal-tb; |
| 25 } | 25 } |
| 26 .horizontal-bt { | |
| 27 -webkit-writing-mode: horizontal-bt; | |
| 28 } | |
| 29 .vertical-rl { | 26 .vertical-rl { |
| 30 -webkit-writing-mode: vertical-rl; | 27 -webkit-writing-mode: vertical-rl; |
| 31 } | 28 } |
| 32 .vertical-lr { | 29 .vertical-lr { |
| 33 -webkit-writing-mode: vertical-lr; | 30 -webkit-writing-mode: vertical-lr; |
| 34 } | 31 } |
| 35 .row { | 32 .row { |
| 36 flex-flow: row; | 33 flex-flow: row; |
| 37 } | 34 } |
| 38 .row-reverse { | 35 .row-reverse { |
| (...skipping 655 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 694 'flexbox': [100, 80], | 691 'flexbox': [100, 80], |
| 695 'child1': [10, 40, 0, 35], | 692 'child1': [10, 40, 0, 35], |
| 696 'child2': [10, 20, 0, 5], | 693 'child2': [10, 20, 0, 5], |
| 697 'child3': [10, 40, 10, 35], | 694 'child3': [10, 40, 10, 35], |
| 698 'child4': [10, 20, 10, 5], | 695 'child4': [10, 20, 10, 5], |
| 699 }, | 696 }, |
| 700 }, | 697 }, |
| 701 }, | 698 }, |
| 702 }, | 699 }, |
| 703 }, | 700 }, |
| 704 'horizontal-bt': { | |
| 705 'row': { | |
| 706 'ltr': { | |
| 707 'wrap': { | |
| 708 'flex-start': { | |
| 709 'flexbox': [80, 20], | |
| 710 'child1': [40, 10, 0, 10], | |
| 711 'child2': [20, 10, 40, 10], | |
| 712 'child3': [40, 10, 0, 0], | |
| 713 'child4': [20, 10, 40, 0], | |
| 714 }, | |
| 715 'flex-end': { | |
| 716 'flexbox': [80, 20], | |
| 717 'child1': [40, 10, 20, 10], | |
| 718 'child2': [20, 10, 60, 10], | |
| 719 'child3': [40, 10, 20, 0], | |
| 720 'child4': [20, 10, 60, 0], | |
| 721 }, | |
| 722 'center': { | |
| 723 'flexbox': [80, 20], | |
| 724 'child1': [40, 10, 10, 10], | |
| 725 'child2': [20, 10, 50, 10], | |
| 726 'child3': [40, 10, 10, 0], | |
| 727 'child4': [20, 10, 50, 0], | |
| 728 }, | |
| 729 'space-between': { | |
| 730 'flexbox': [80, 20], | |
| 731 'child1': [40, 10, 0, 10], | |
| 732 'child2': [20, 10, 60, 10], | |
| 733 'child3': [40, 10, 0, 0], | |
| 734 'child4': [20, 10, 60, 0], | |
| 735 }, | |
| 736 'space-around': { | |
| 737 'flexbox': [80, 20], | |
| 738 'child1': [40, 10, 5, 10], | |
| 739 'child2': [20, 10, 55, 10], | |
| 740 'child3': [40, 10, 5, 0], | |
| 741 'child4': [20, 10, 55, 0], | |
| 742 }, | |
| 743 }, | |
| 744 'wrap-reverse': { | |
| 745 'flex-start': { | |
| 746 'flexbox': [80, 20], | |
| 747 'child1': [40, 10, 0, 0], | |
| 748 'child2': [20, 10, 40, 0], | |
| 749 'child3': [40, 10, 0, 10], | |
| 750 'child4': [20, 10, 40, 10], | |
| 751 }, | |
| 752 'flex-end': { | |
| 753 'flexbox': [80, 20], | |
| 754 'child1': [40, 10, 20, 0], | |
| 755 'child2': [20, 10, 60, 0], | |
| 756 'child3': [40, 10, 20, 10], | |
| 757 'child4': [20, 10, 60, 10], | |
| 758 }, | |
| 759 'center': { | |
| 760 'flexbox': [80, 20], | |
| 761 'child1': [40, 10, 10, 0], | |
| 762 'child2': [20, 10, 50, 0], | |
| 763 'child3': [40, 10, 10, 10], | |
| 764 'child4': [20, 10, 50, 10], | |
| 765 }, | |
| 766 'space-between': { | |
| 767 'flexbox': [80, 20], | |
| 768 'child1': [40, 10, 0, 0], | |
| 769 'child2': [20, 10, 60, 0], | |
| 770 'child3': [40, 10, 0, 10], | |
| 771 'child4': [20, 10, 60, 10], | |
| 772 }, | |
| 773 'space-around': { | |
| 774 'flexbox': [80, 20], | |
| 775 'child1': [40, 10, 5, 0], | |
| 776 'child2': [20, 10, 55, 0], | |
| 777 'child3': [40, 10, 5, 10], | |
| 778 'child4': [20, 10, 55, 10], | |
| 779 }, | |
| 780 }, | |
| 781 }, | |
| 782 'rtl': { | |
| 783 'wrap': { | |
| 784 'flex-start': { | |
| 785 'flexbox': [80, 20], | |
| 786 'child1': [40, 10, 40, 10], | |
| 787 'child2': [20, 10, 20, 10], | |
| 788 'child3': [40, 10, 40, 0], | |
| 789 'child4': [20, 10, 20, 0], | |
| 790 }, | |
| 791 'flex-end': { | |
| 792 'flexbox': [80, 20], | |
| 793 'child1': [40, 10, 20, 10], | |
| 794 'child2': [20, 10, 0, 10], | |
| 795 'child3': [40, 10, 20, 0], | |
| 796 'child4': [20, 10, 0, 0], | |
| 797 }, | |
| 798 'center': { | |
| 799 'flexbox': [80, 20], | |
| 800 'child1': [40, 10, 30, 10], | |
| 801 'child2': [20, 10, 10, 10], | |
| 802 'child3': [40, 10, 30, 0], | |
| 803 'child4': [20, 10, 10, 0], | |
| 804 }, | |
| 805 'space-between': { | |
| 806 'flexbox': [80, 20], | |
| 807 'child1': [40, 10, 40, 10], | |
| 808 'child2': [20, 10, 0, 10], | |
| 809 'child3': [40, 10, 40, 0], | |
| 810 'child4': [20, 10, 0, 0], | |
| 811 }, | |
| 812 'space-around': { | |
| 813 'flexbox': [80, 20], | |
| 814 'child1': [40, 10, 35, 10], | |
| 815 'child2': [20, 10, 5, 10], | |
| 816 'child3': [40, 10, 35, 0], | |
| 817 'child4': [20, 10, 5, 0], | |
| 818 }, | |
| 819 }, | |
| 820 'wrap-reverse': { | |
| 821 'flex-start': { | |
| 822 'flexbox': [80, 20], | |
| 823 'child1': [40, 10, 40, 0], | |
| 824 'child2': [20, 10, 20, 0], | |
| 825 'child3': [40, 10, 40, 10], | |
| 826 'child4': [20, 10, 20, 10], | |
| 827 }, | |
| 828 'flex-end': { | |
| 829 'flexbox': [80, 20], | |
| 830 'child1': [40, 10, 20, 0], | |
| 831 'child2': [20, 10, 0, 0], | |
| 832 'child3': [40, 10, 20, 10], | |
| 833 'child4': [20, 10, 0, 10], | |
| 834 }, | |
| 835 'center': { | |
| 836 'flexbox': [80, 20], | |
| 837 'child1': [40, 10, 30, 0], | |
| 838 'child2': [20, 10, 10, 0], | |
| 839 'child3': [40, 10, 30, 10], | |
| 840 'child4': [20, 10, 10, 10], | |
| 841 }, | |
| 842 'space-between': { | |
| 843 'flexbox': [80, 20], | |
| 844 'child1': [40, 10, 40, 0], | |
| 845 'child2': [20, 10, 0, 0], | |
| 846 'child3': [40, 10, 40, 10], | |
| 847 'child4': [20, 10, 0, 10], | |
| 848 }, | |
| 849 'space-around': { | |
| 850 'flexbox': [80, 20], | |
| 851 'child1': [40, 10, 35, 0], | |
| 852 'child2': [20, 10, 5, 0], | |
| 853 'child3': [40, 10, 35, 10], | |
| 854 'child4': [20, 10, 5, 10], | |
| 855 }, | |
| 856 }, | |
| 857 }, | |
| 858 }, | |
| 859 'column': { | |
| 860 'ltr': { | |
| 861 'wrap': { | |
| 862 'flex-start': { | |
| 863 'flexbox': [100, 80], | |
| 864 'child1': [10, 40, 0, 40], | |
| 865 'child2': [10, 20, 0, 20], | |
| 866 'child3': [10, 40, 10, 40], | |
| 867 'child4': [10, 20, 10, 20], | |
| 868 }, | |
| 869 'flex-end': { | |
| 870 'flexbox': [100, 80], | |
| 871 'child1': [10, 40, 0, 20], | |
| 872 'child2': [10, 20, 0, 0], | |
| 873 'child3': [10, 40, 10, 20], | |
| 874 'child4': [10, 20, 10, 0], | |
| 875 }, | |
| 876 'center': { | |
| 877 'flexbox': [100, 80], | |
| 878 'child1': [10, 40, 0, 30], | |
| 879 'child2': [10, 20, 0, 10], | |
| 880 'child3': [10, 40, 10, 30], | |
| 881 'child4': [10, 20, 10, 10], | |
| 882 }, | |
| 883 'space-between': { | |
| 884 'flexbox': [100, 80], | |
| 885 'child1': [10, 40, 0, 40], | |
| 886 'child2': [10, 20, 0, 0], | |
| 887 'child3': [10, 40, 10, 40], | |
| 888 'child4': [10, 20, 10, 0], | |
| 889 }, | |
| 890 'space-around': { | |
| 891 'flexbox': [100, 80], | |
| 892 'child1': [10, 40, 0, 35], | |
| 893 'child2': [10, 20, 0, 5], | |
| 894 'child3': [10, 40, 10, 35], | |
| 895 'child4': [10, 20, 10, 5], | |
| 896 }, | |
| 897 }, | |
| 898 'wrap-reverse': { | |
| 899 'flex-start': { | |
| 900 'flexbox': [100, 80], | |
| 901 'child1': [10, 40, 90, 40], | |
| 902 'child2': [10, 20, 90, 20], | |
| 903 'child3': [10, 40, 80, 40], | |
| 904 'child4': [10, 20, 80, 20], | |
| 905 }, | |
| 906 'flex-end': { | |
| 907 'flexbox': [100, 80], | |
| 908 'child1': [10, 40, 90, 20], | |
| 909 'child2': [10, 20, 90, 0], | |
| 910 'child3': [10, 40, 80, 20], | |
| 911 'child4': [10, 20, 80, 0], | |
| 912 }, | |
| 913 'center': { | |
| 914 'flexbox': [100, 80], | |
| 915 'child1': [10, 40, 90, 30], | |
| 916 'child2': [10, 20, 90, 10], | |
| 917 'child3': [10, 40, 80, 30], | |
| 918 'child4': [10, 20, 80, 10], | |
| 919 }, | |
| 920 'space-between': { | |
| 921 'flexbox': [100, 80], | |
| 922 'child1': [10, 40, 90, 40], | |
| 923 'child2': [10, 20, 90, 0], | |
| 924 'child3': [10, 40, 80, 40], | |
| 925 'child4': [10, 20, 80, 0], | |
| 926 }, | |
| 927 'space-around': { | |
| 928 'flexbox': [100, 80], | |
| 929 'child1': [10, 40, 90, 35], | |
| 930 'child2': [10, 20, 90, 5], | |
| 931 'child3': [10, 40, 80, 35], | |
| 932 'child4': [10, 20, 80, 5], | |
| 933 }, | |
| 934 }, | |
| 935 }, | |
| 936 'rtl': { | |
| 937 'wrap': { | |
| 938 'flex-start': { | |
| 939 'flexbox': [100, 80], | |
| 940 'child1': [10, 40, 90, 40], | |
| 941 'child2': [10, 20, 90, 20], | |
| 942 'child3': [10, 40, 80, 40], | |
| 943 'child4': [10, 20, 80, 20], | |
| 944 }, | |
| 945 'flex-end': { | |
| 946 'flexbox': [100, 80], | |
| 947 'child1': [10, 40, 90, 20], | |
| 948 'child2': [10, 20, 90, 0], | |
| 949 'child3': [10, 40, 80, 20], | |
| 950 'child4': [10, 20, 80, 0], | |
| 951 }, | |
| 952 'center': { | |
| 953 'flexbox': [100, 80], | |
| 954 'child1': [10, 40, 90, 30], | |
| 955 'child2': [10, 20, 90, 10], | |
| 956 'child3': [10, 40, 80, 30], | |
| 957 'child4': [10, 20, 80, 10], | |
| 958 }, | |
| 959 'space-between': { | |
| 960 'flexbox': [100, 80], | |
| 961 'child1': [10, 40, 90, 40], | |
| 962 'child2': [10, 20, 90, 0], | |
| 963 'child3': [10, 40, 80, 40], | |
| 964 'child4': [10, 20, 80, 0], | |
| 965 }, | |
| 966 'space-around': { | |
| 967 'flexbox': [100, 80], | |
| 968 'child1': [10, 40, 90, 35], | |
| 969 'child2': [10, 20, 90, 5], | |
| 970 'child3': [10, 40, 80, 35], | |
| 971 'child4': [10, 20, 80, 5], | |
| 972 }, | |
| 973 }, | |
| 974 'wrap-reverse': { | |
| 975 'flex-start': { | |
| 976 'flexbox': [100, 80], | |
| 977 'child1': [10, 40, 0, 40], | |
| 978 'child2': [10, 20, 0, 20], | |
| 979 'child3': [10, 40, 10, 40], | |
| 980 'child4': [10, 20, 10, 20], | |
| 981 }, | |
| 982 'flex-end': { | |
| 983 'flexbox': [100, 80], | |
| 984 'child1': [10, 40, 0, 20], | |
| 985 'child2': [10, 20, 0, 0], | |
| 986 'child3': [10, 40, 10, 20], | |
| 987 'child4': [10, 20, 10, 0], | |
| 988 }, | |
| 989 'center': { | |
| 990 'flexbox': [100, 80], | |
| 991 'child1': [10, 40, 0, 30], | |
| 992 'child2': [10, 20, 0, 10], | |
| 993 'child3': [10, 40, 10, 30], | |
| 994 'child4': [10, 20, 10, 10], | |
| 995 }, | |
| 996 'space-between': { | |
| 997 'flexbox': [100, 80], | |
| 998 'child1': [10, 40, 0, 40], | |
| 999 'child2': [10, 20, 0, 0], | |
| 1000 'child3': [10, 40, 10, 40], | |
| 1001 'child4': [10, 20, 10, 0], | |
| 1002 }, | |
| 1003 'space-around': { | |
| 1004 'flexbox': [100, 80], | |
| 1005 'child1': [10, 40, 0, 35], | |
| 1006 'child2': [10, 20, 0, 5], | |
| 1007 'child3': [10, 40, 10, 35], | |
| 1008 'child4': [10, 20, 10, 5], | |
| 1009 }, | |
| 1010 }, | |
| 1011 }, | |
| 1012 }, | |
| 1013 'row-reverse': { | |
| 1014 'ltr': { | |
| 1015 'wrap': { | |
| 1016 'flex-start': { | |
| 1017 'flexbox': [80, 20], | |
| 1018 'child1': [40, 10, 40, 10], | |
| 1019 'child2': [20, 10, 20, 10], | |
| 1020 'child3': [40, 10, 40, 0], | |
| 1021 'child4': [20, 10, 20, 0], | |
| 1022 }, | |
| 1023 'flex-end': { | |
| 1024 'flexbox': [80, 20], | |
| 1025 'child1': [40, 10, 20, 10], | |
| 1026 'child2': [20, 10, 0, 10], | |
| 1027 'child3': [40, 10, 20, 0], | |
| 1028 'child4': [20, 10, 0, 0], | |
| 1029 }, | |
| 1030 'center': { | |
| 1031 'flexbox': [80, 20], | |
| 1032 'child1': [40, 10, 30, 10], | |
| 1033 'child2': [20, 10, 10, 10], | |
| 1034 'child3': [40, 10, 30, 0], | |
| 1035 'child4': [20, 10, 10, 0], | |
| 1036 }, | |
| 1037 'space-between': { | |
| 1038 'flexbox': [80, 20], | |
| 1039 'child1': [40, 10, 40, 10], | |
| 1040 'child2': [20, 10, 0, 10], | |
| 1041 'child3': [40, 10, 40, 0], | |
| 1042 'child4': [20, 10, 0, 0], | |
| 1043 }, | |
| 1044 'space-around': { | |
| 1045 'flexbox': [80, 20], | |
| 1046 'child1': [40, 10, 35, 10], | |
| 1047 'child2': [20, 10, 5, 10], | |
| 1048 'child3': [40, 10, 35, 0], | |
| 1049 'child4': [20, 10, 5, 0], | |
| 1050 }, | |
| 1051 }, | |
| 1052 'wrap-reverse': { | |
| 1053 'flex-start': { | |
| 1054 'flexbox': [80, 20], | |
| 1055 'child1': [40, 10, 40, 0], | |
| 1056 'child2': [20, 10, 20, 0], | |
| 1057 'child3': [40, 10, 40, 10], | |
| 1058 'child4': [20, 10, 20, 10], | |
| 1059 }, | |
| 1060 'flex-end': { | |
| 1061 'flexbox': [80, 20], | |
| 1062 'child1': [40, 10, 20, 0], | |
| 1063 'child2': [20, 10, 0, 0], | |
| 1064 'child3': [40, 10, 20, 10], | |
| 1065 'child4': [20, 10, 0, 10], | |
| 1066 }, | |
| 1067 'center': { | |
| 1068 'flexbox': [80, 20], | |
| 1069 'child1': [40, 10, 30, 0], | |
| 1070 'child2': [20, 10, 10, 0], | |
| 1071 'child3': [40, 10, 30, 10], | |
| 1072 'child4': [20, 10, 10, 10], | |
| 1073 }, | |
| 1074 'space-between': { | |
| 1075 'flexbox': [80, 20], | |
| 1076 'child1': [40, 10, 40, 0], | |
| 1077 'child2': [20, 10, 0, 0], | |
| 1078 'child3': [40, 10, 40, 10], | |
| 1079 'child4': [20, 10, 0, 10], | |
| 1080 }, | |
| 1081 'space-around': { | |
| 1082 'flexbox': [80, 20], | |
| 1083 'child1': [40, 10, 35, 0], | |
| 1084 'child2': [20, 10, 5, 0], | |
| 1085 'child3': [40, 10, 35, 10], | |
| 1086 'child4': [20, 10, 5, 10], | |
| 1087 }, | |
| 1088 }, | |
| 1089 }, | |
| 1090 'rtl': { | |
| 1091 'wrap': { | |
| 1092 'flex-start': { | |
| 1093 'flexbox': [80, 20], | |
| 1094 'child1': [40, 10, 0, 10], | |
| 1095 'child2': [20, 10, 40, 10], | |
| 1096 'child3': [40, 10, 0, 0], | |
| 1097 'child4': [20, 10, 40, 0], | |
| 1098 }, | |
| 1099 'flex-end': { | |
| 1100 'flexbox': [80, 20], | |
| 1101 'child1': [40, 10, 20, 10], | |
| 1102 'child2': [20, 10, 60, 10], | |
| 1103 'child3': [40, 10, 20, 0], | |
| 1104 'child4': [20, 10, 60, 0], | |
| 1105 }, | |
| 1106 'center': { | |
| 1107 'flexbox': [80, 20], | |
| 1108 'child1': [40, 10, 10, 10], | |
| 1109 'child2': [20, 10, 50, 10], | |
| 1110 'child3': [40, 10, 10, 0], | |
| 1111 'child4': [20, 10, 50, 0], | |
| 1112 }, | |
| 1113 'space-between': { | |
| 1114 'flexbox': [80, 20], | |
| 1115 'child1': [40, 10, 0, 10], | |
| 1116 'child2': [20, 10, 60, 10], | |
| 1117 'child3': [40, 10, 0, 0], | |
| 1118 'child4': [20, 10, 60, 0], | |
| 1119 }, | |
| 1120 'space-around': { | |
| 1121 'flexbox': [80, 20], | |
| 1122 'child1': [40, 10, 5, 10], | |
| 1123 'child2': [20, 10, 55, 10], | |
| 1124 'child3': [40, 10, 5, 0], | |
| 1125 'child4': [20, 10, 55, 0], | |
| 1126 }, | |
| 1127 }, | |
| 1128 'wrap-reverse': { | |
| 1129 'flex-start': { | |
| 1130 'flexbox': [80, 20], | |
| 1131 'child1': [40, 10, 0, 0], | |
| 1132 'child2': [20, 10, 40, 0], | |
| 1133 'child3': [40, 10, 0, 10], | |
| 1134 'child4': [20, 10, 40, 10], | |
| 1135 }, | |
| 1136 'flex-end': { | |
| 1137 'flexbox': [80, 20], | |
| 1138 'child1': [40, 10, 20, 0], | |
| 1139 'child2': [20, 10, 60, 0], | |
| 1140 'child3': [40, 10, 20, 10], | |
| 1141 'child4': [20, 10, 60, 10], | |
| 1142 }, | |
| 1143 'center': { | |
| 1144 'flexbox': [80, 20], | |
| 1145 'child1': [40, 10, 10, 0], | |
| 1146 'child2': [20, 10, 50, 0], | |
| 1147 'child3': [40, 10, 10, 10], | |
| 1148 'child4': [20, 10, 50, 10], | |
| 1149 }, | |
| 1150 'space-between': { | |
| 1151 'flexbox': [80, 20], | |
| 1152 'child1': [40, 10, 0, 0], | |
| 1153 'child2': [20, 10, 60, 0], | |
| 1154 'child3': [40, 10, 0, 10], | |
| 1155 'child4': [20, 10, 60, 10], | |
| 1156 }, | |
| 1157 'space-around': { | |
| 1158 'flexbox': [80, 20], | |
| 1159 'child1': [40, 10, 5, 0], | |
| 1160 'child2': [20, 10, 55, 0], | |
| 1161 'child3': [40, 10, 5, 10], | |
| 1162 'child4': [20, 10, 55, 10], | |
| 1163 }, | |
| 1164 }, | |
| 1165 }, | |
| 1166 }, | |
| 1167 'column-reverse': { | |
| 1168 'ltr': { | |
| 1169 'wrap': { | |
| 1170 'flex-start': { | |
| 1171 'flexbox': [100, 80], | |
| 1172 'child1': [10, 40, 0, 0], | |
| 1173 'child2': [10, 20, 0, 40], | |
| 1174 'child3': [10, 40, 10, 0], | |
| 1175 'child4': [10, 20, 10, 40], | |
| 1176 }, | |
| 1177 'flex-end': { | |
| 1178 'flexbox': [100, 80], | |
| 1179 'child1': [10, 40, 0, 20], | |
| 1180 'child2': [10, 20, 0, 60], | |
| 1181 'child3': [10, 40, 10, 20], | |
| 1182 'child4': [10, 20, 10, 60], | |
| 1183 }, | |
| 1184 'center': { | |
| 1185 'flexbox': [100, 80], | |
| 1186 'child1': [10, 40, 0, 10], | |
| 1187 'child2': [10, 20, 0, 50], | |
| 1188 'child3': [10, 40, 10, 10], | |
| 1189 'child4': [10, 20, 10, 50], | |
| 1190 }, | |
| 1191 'space-between': { | |
| 1192 'flexbox': [100, 80], | |
| 1193 'child1': [10, 40, 0, 0], | |
| 1194 'child2': [10, 20, 0, 60], | |
| 1195 'child3': [10, 40, 10, 0], | |
| 1196 'child4': [10, 20, 10, 60], | |
| 1197 }, | |
| 1198 'space-around': { | |
| 1199 'flexbox': [100, 80], | |
| 1200 'child1': [10, 40, 0, 5], | |
| 1201 'child2': [10, 20, 0, 55], | |
| 1202 'child3': [10, 40, 10, 5], | |
| 1203 'child4': [10, 20, 10, 55], | |
| 1204 }, | |
| 1205 }, | |
| 1206 'wrap-reverse': { | |
| 1207 'flex-start': { | |
| 1208 'flexbox': [100, 80], | |
| 1209 'child1': [10, 40, 90, 0], | |
| 1210 'child2': [10, 20, 90, 40], | |
| 1211 'child3': [10, 40, 80, 0], | |
| 1212 'child4': [10, 20, 80, 40], | |
| 1213 }, | |
| 1214 'flex-end': { | |
| 1215 'flexbox': [100, 80], | |
| 1216 'child1': [10, 40, 90, 20], | |
| 1217 'child2': [10, 20, 90, 60], | |
| 1218 'child3': [10, 40, 80, 20], | |
| 1219 'child4': [10, 20, 80, 60], | |
| 1220 }, | |
| 1221 'center': { | |
| 1222 'flexbox': [100, 80], | |
| 1223 'child1': [10, 40, 90, 10], | |
| 1224 'child2': [10, 20, 90, 50], | |
| 1225 'child3': [10, 40, 80, 10], | |
| 1226 'child4': [10, 20, 80, 50], | |
| 1227 }, | |
| 1228 'space-between': { | |
| 1229 'flexbox': [100, 80], | |
| 1230 'child1': [10, 40, 90, 0], | |
| 1231 'child2': [10, 20, 90, 60], | |
| 1232 'child3': [10, 40, 80, 0], | |
| 1233 'child4': [10, 20, 80, 60], | |
| 1234 }, | |
| 1235 'space-around': { | |
| 1236 'flexbox': [100, 80], | |
| 1237 'child1': [10, 40, 90, 5], | |
| 1238 'child2': [10, 20, 90, 55], | |
| 1239 'child3': [10, 40, 80, 5], | |
| 1240 'child4': [10, 20, 80, 55], | |
| 1241 }, | |
| 1242 }, | |
| 1243 }, | |
| 1244 'rtl': { | |
| 1245 'wrap': { | |
| 1246 'flex-start': { | |
| 1247 'flexbox': [100, 80], | |
| 1248 'child1': [10, 40, 90, 0], | |
| 1249 'child2': [10, 20, 90, 40], | |
| 1250 'child3': [10, 40, 80, 0], | |
| 1251 'child4': [10, 20, 80, 40], | |
| 1252 }, | |
| 1253 'flex-end': { | |
| 1254 'flexbox': [100, 80], | |
| 1255 'child1': [10, 40, 90, 20], | |
| 1256 'child2': [10, 20, 90, 60], | |
| 1257 'child3': [10, 40, 80, 20], | |
| 1258 'child4': [10, 20, 80, 60], | |
| 1259 }, | |
| 1260 'center': { | |
| 1261 'flexbox': [100, 80], | |
| 1262 'child1': [10, 40, 90, 10], | |
| 1263 'child2': [10, 20, 90, 50], | |
| 1264 'child3': [10, 40, 80, 10], | |
| 1265 'child4': [10, 20, 80, 50], | |
| 1266 }, | |
| 1267 'space-between': { | |
| 1268 'flexbox': [100, 80], | |
| 1269 'child1': [10, 40, 90, 0], | |
| 1270 'child2': [10, 20, 90, 60], | |
| 1271 'child3': [10, 40, 80, 0], | |
| 1272 'child4': [10, 20, 80, 60], | |
| 1273 }, | |
| 1274 'space-around': { | |
| 1275 'flexbox': [100, 80], | |
| 1276 'child1': [10, 40, 90, 5], | |
| 1277 'child2': [10, 20, 90, 55], | |
| 1278 'child3': [10, 40, 80, 5], | |
| 1279 'child4': [10, 20, 80, 55], | |
| 1280 }, | |
| 1281 }, | |
| 1282 'wrap-reverse': { | |
| 1283 'flex-start': { | |
| 1284 'flexbox': [100, 80], | |
| 1285 'child1': [10, 40, 0, 0], | |
| 1286 'child2': [10, 20, 0, 40], | |
| 1287 'child3': [10, 40, 10, 0], | |
| 1288 'child4': [10, 20, 10, 40], | |
| 1289 }, | |
| 1290 'flex-end': { | |
| 1291 'flexbox': [100, 80], | |
| 1292 'child1': [10, 40, 0, 20], | |
| 1293 'child2': [10, 20, 0, 60], | |
| 1294 'child3': [10, 40, 10, 20], | |
| 1295 'child4': [10, 20, 10, 60], | |
| 1296 }, | |
| 1297 'center': { | |
| 1298 'flexbox': [100, 80], | |
| 1299 'child1': [10, 40, 0, 10], | |
| 1300 'child2': [10, 20, 0, 50], | |
| 1301 'child3': [10, 40, 10, 10], | |
| 1302 'child4': [10, 20, 10, 50], | |
| 1303 }, | |
| 1304 'space-between': { | |
| 1305 'flexbox': [100, 80], | |
| 1306 'child1': [10, 40, 0, 0], | |
| 1307 'child2': [10, 20, 0, 60], | |
| 1308 'child3': [10, 40, 10, 0], | |
| 1309 'child4': [10, 20, 10, 60], | |
| 1310 }, | |
| 1311 'space-around': { | |
| 1312 'flexbox': [100, 80], | |
| 1313 'child1': [10, 40, 0, 5], | |
| 1314 'child2': [10, 20, 0, 55], | |
| 1315 'child3': [10, 40, 10, 5], | |
| 1316 'child4': [10, 20, 10, 55], | |
| 1317 }, | |
| 1318 }, | |
| 1319 }, | |
| 1320 }, | |
| 1321 }, | |
| 1322 'vertical-rl': { | 701 'vertical-rl': { |
| 1323 'row': { | 702 'row': { |
| 1324 'ltr': { | 703 'ltr': { |
| 1325 'wrap': { | 704 'wrap': { |
| 1326 'flex-start': { | 705 'flex-start': { |
| 1327 'flexbox': [20, 80], | 706 'flexbox': [20, 80], |
| 1328 'child1': [10, 40, 10, 0], | 707 'child1': [10, 40, 10, 0], |
| 1329 'child2': [10, 20, 10, 40], | 708 'child2': [10, 20, 10, 40], |
| 1330 'child3': [10, 40, 0, 0], | 709 'child3': [10, 40, 0, 0], |
| 1331 'child4': [10, 20, 0, 40], | 710 'child4': [10, 20, 0, 40], |
| (...skipping 1240 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 2572 + crossAxis + ': ' + crossAxisLength + 'px;'); | 1951 + crossAxis + ': ' + crossAxisLength + 'px;'); |
| 2573 | 1952 |
| 2574 child.setAttribute("data-expected-width", expectations[0]); | 1953 child.setAttribute("data-expected-width", expectations[0]); |
| 2575 child.setAttribute("data-expected-height", expectations[1]); | 1954 child.setAttribute("data-expected-height", expectations[1]); |
| 2576 child.setAttribute("data-offset-x", expectations[2]); | 1955 child.setAttribute("data-offset-x", expectations[2]); |
| 2577 child.setAttribute("data-offset-y", expectations[3]); | 1956 child.setAttribute("data-offset-y", expectations[3]); |
| 2578 | 1957 |
| 2579 flexbox.appendChild(child); | 1958 flexbox.appendChild(child); |
| 2580 } | 1959 } |
| 2581 | 1960 |
| 2582 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-l
r']; | 1961 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; |
| 2583 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; | 1962 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 2584 var directions = ['ltr', 'rtl']; | 1963 var directions = ['ltr', 'rtl']; |
| 2585 var wraps = ['wrap', 'wrap-reverse']; | 1964 var wraps = ['wrap', 'wrap-reverse']; |
| 2586 var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'spa
ce-around']; | 1965 var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'spa
ce-around']; |
| 2587 | 1966 |
| 2588 writingModes.forEach(function(writingMode) { | 1967 writingModes.forEach(function(writingMode) { |
| 2589 flexDirections.forEach(function(flexDirection) { | 1968 flexDirections.forEach(function(flexDirection) { |
| 2590 directions.forEach(function(direction) { | 1969 directions.forEach(function(direction) { |
| 2591 wraps.forEach(function(wrap) { | 1970 wraps.forEach(function(wrap) { |
| 2592 justifyContents.forEach(function(justifyContent) { | 1971 justifyContents.forEach(function(justifyContent) { |
| (...skipping 23 matching lines...) Expand all Loading... |
| 2616 | 1995 |
| 2617 document.body.appendChild(flexbox); | 1996 document.body.appendChild(flexbox); |
| 2618 }) | 1997 }) |
| 2619 }) | 1998 }) |
| 2620 }) | 1999 }) |
| 2621 }) | 2000 }) |
| 2622 }) | 2001 }) |
| 2623 </script> | 2002 </script> |
| 2624 </body> | 2003 </body> |
| 2625 </html> | 2004 </html> |
| OLD | NEW |