Flex Direction
Justify Content
{{item.content}}Note: Internet Explorer 10 and earlier versions do not support the flex-direction property.
Search thousands of free JavaScript snippets that you can quickly copy and paste into your web pages. Get free JavaScript tutorials, references, code, menus, calendars, popup windows, games, and much more.
style binding vuejs
input[type=radio]:checked + label { color: orange; } #flex{ display: flex; justify-content: space-between } #main { width: 400px; height: 400px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; } #main div { width: 50px; height: 50px; }
new Vue({ el: "#app", data: { items: [ { color: "coral", content: "A" }, { color: "lightblue", content: "B" }, { color: "khaki", content: "C" }, { color: "pink", content: "D" }, { color: "lightgrey", content: "E" }, { color: "lightgreen", content: "F" } ], justifyContent: [ "flex-start", "flex-end", "center", "space-between", "space-around", "initial" ], justifyContentPick: "flex-start", flexDirection: ["row", "row-reverse", "column", "column-reverse", "initial"], picked: "row" }, computed: { styleMain: function() { var vm = this; var pick = vm.picked; var justifyContentPick = vm.justifyContentPick; return { "flex-direction": pick, "-webkit-flex-direction": pick, 'justify-content': justifyContentPick }; } } });
Subscribe to:
Post Comments (Atom)
This will make you a better decision maker | Annie Duke (author of “Thinking in Bets” and “Quit”, former pro poker…
Annie is a former professional poker player, decision-making expert, author, and special partner at First Round Capital. ͏ ͏ ͏ ...
No comments:
Post a Comment