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 |