Flex Direction
Justify Content
{{item.content}}Note: Internet Explorer 10 and earlier versions do not support the flex-direction property.
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)
The 6 New Rules of Communicating
The era of teleprompters and talking points has come to an end ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ...
No comments:
Post a Comment