.parent {\n  margin: 10px -10px -10px;\n  display: -webkit-flex;\n  display: -moz-flex;\n  display: -ms-flex;\n  display: -o-flex;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  .child {\n    align-self: center;\n    flex-basis: calc(50% - 10px);\r\n    max-width: calc(50% - 10px);\n    margin: 5px;\n    font-size: 0;\n  }\n}<\/code><\/pre>\n\n\n\n
1. \u89aa\u8981\u7d20\u306bflex\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u6307\u5b9a<\/h2>\n\n\n\n
.parent {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n}<\/code><\/pre>\n\n\n\n
2. \u5b50\u8981\u7d20\u540c\u58eb\u306e\u9593\u306e\u5e45\u306e\u534a\u5206\u306e\u6570\u3092margin\u306b\u6307\u5b9a<\/h2>\n\n\n\n
.child {\n  margin: 5px; \/\/\u5b50\u8981\u7d20\u540c\u58eb\u306e\u9593\u306e\u5e4510px\u306e\u5834\u5408\n}<\/code><\/pre>\n\n\n\n
3. \u5b50\u8981\u7d20 \u6307\u5b9a\u3057\u305fmargin\u306e\u500d\u306e\u6570\u3092flex-basis\u304b\u3089\u5f15\u304f<\/h2>\n\n\n\n
.child {\n  flex-basis: calc(50% - 10px); \/\/1\u884c\u306b2\u500b\u8868\u793a\u306e\u5834\u5408\n  flex-basis: calc(33.33% - 10px); \/\/1\u884c\u306b3\u500b\u8868\u793a\u306e\u5834\u5408\n  flex-basis: calc(25% - 10px); \/\/1\u884c\u306b4\u500b\u8868\u793a\u306e\u5834\u5408\n}\n<\/code><\/pre>\n\n\n\n
4. \u89aa\u8981\u7d20\u306b\u30de\u30a4\u30ca\u30b9margin\u3092\u6307\u5b9a<\/h2>\n\n\n\n
\u5b50\u8981\u7d20\u306emargin\u5206\u3001\u5e45\u304c\u72ed\u304f\u306a\u308b\u306e\u3067\u3001\u89aa\u8981\u7d20\u306b\u30de\u30a4\u30ca\u30b9margin\u3092\u6307\u5b9a\u3002
\u4e21\u7aef\u3068bottom\u306f\u30de\u30a4\u30ca\u30b9\u3001top\u306f\u30d7\u30e9\u30b9\u3002<\/p>\n\n\n\n
.parent {\n  margin: 10px -10px -10px; \/\/top left\/right bottom\n}<\/code><\/pre>\n\n\n\n
\u30e1\u30e21<\/h3>\n\n\n\n
justify-content: space-between;\u3092\u6307\u5b9a\uff0b\u5b50\u8981\u7d20\u306bmargin\u306a\u3057\u3060\u3068\u3001\u6700\u5f8c\u306e\u884c\u306e\u8981\u7d20\u304c\u7aef\u306b\u5bc4\u308b\u3002
clearfix\u306ecss\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u3068\u304d\u306b\u3001div\u306bafter\u8981\u7d20\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u3068\u3001\u5b50\u8981\u7d20\u306e\u4e26\u3073\u306bafter\u8981\u7d20\u304c\u5165\u308b\u305f\u3081\u3002<\/p>\n\n\n\n
justify-content: flex-start;\u3092\u6307\u5b9a\uff0b\u5b50\u8981\u7d20\u306bmargin\u8a2d\u5b9a\uff0bflex-basis\u3067calc\u3067\u6307\u5b9a\u3059\u308b\u5e45\u304b\u3089margin\u5206\u5f15\u304f\u3068\u5bc4\u3089\u306a\u3044\u3002<\/p>\n\n\n\n
flexbox\u306ejustify-content\u3067space-between\u3092\u3059\u308b\u3068\u3001\u4f59\u3063\u305f\u8981\u7d20\u304c\u4e21\u7aef\u306b\u3088\u3063\u3066\u3057\u307e\u3046\u306e\u3092\u76f4\u3057\u305f\u3044<\/a><\/p>\n\n\n\n
\u30e1\u30e22<\/h3>\n\n\n\n
\u5b50\u8981\u7d20\u306b\u753b\u50cf\u304c\u3042\u308a\u753b\u50cf\u306e\u4e0b\u306b\u4f59\u5206\u306a\u7a7a\u767d\u304c\u3067\u304d\u308b\u5834\u5408\u3001font-size: 0\u3092\u6307\u5b9a\u3059\u308b\u3068\u6d88\u3048\u308b\u3002<\/p>\n\n\n\n
.child {\n  font-size: 0;\n}<\/code><\/pre>\n\n\n\n
\u30e1\u30e23<\/h3>\n\n\n\n
flex\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\uff08\u307e\u3068\u3081\u3066\u6307\u5b9a\uff09\u306ecalc\u306fIE\u3067\u52b9\u304b\u306a\u3044\u305f\u3081\u3001\u4f7f\u7528\u3057\u306a\u3044\u3002flex-basis\u3067\u6307\u5b9a\u3002<\/p>\n\n\n\n
.child {\n  flex: 0 1 calc(50% - 10px); \/\/IE\u3067\u5d29\u308c\u308b\n  flex-basis: calc(50% - 10px); \/\/IE\u3067\u3082\u5d29\u308c\u306a\u3044\n}<\/code><\/pre>\n\n\n\n
flexbox\u306e\u30d0\u30b0\u306b\u7acb\u3061\u5411\u304b\u3046\uff08flexbox\u30d0\u30b0\u307e\u3068\u3081\uff09<\/a><\/p>\n\n\n\n
\u30e1\u30e24<\/h2>\n\n\n\n
IE\u3067\u30ab\u30e9\u30e0\u843d\u3061\u3059\u308b\u306e\u3067\u3001max-width\u3082\u540c\u6642\u306b\u6307\u5b9a\u3059\u308b\u3002
IE\u3067\u306fpadding\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u3068\u304d\u3001box-sizing: border-box\u304c\u52b9\u304b\u306a\u3044\u3002<\/p>\n\n\n\n
.child {\n  flex-basis: 340px;\n  max-width: 340px;\n}<\/code><\/pre>\n\n\n\n
IE11\u3067flex-basis\u306e\u5024\u306bbox-sizing: border-box\u304c\u52b9\u304b\u306a\u3044\u30d0\u30b0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
1. \u89aa\u8981\u7d20\u306bflex\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u6307\u5b9a 2. \u5b50\u8981\u7d20\u540c\u58eb\u306e\u9593\u306e\u5e45\u306e\u534a\u5206\u306e\u6570\u3092margin\u306b\u6307\u5b9a 3. \u5b50\u8981\u7d20 \u6307\u5b9a\u3057\u305fmargin\u306e\u500d\u306e\u6570\u3092flex-basis\u304b\u3089\u5f15\u304f 4. \u89aa\u8981\u7d20\u306b\u30de\u30a4\u30ca\u30b9margin\u3092\u6307\u5b9a \u5b50\u8981\u7d20\u306e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_locale":"ja","_original_post":"https:\/\/risalog.org\/?p=1001"},"categories":[5,17],"tags":[14],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/posts\/1001"}],"collection":[{"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/comments?post=1001"}],"version-history":[{"count":14,"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/posts\/1001\/revisions"}],"predecessor-version":[{"id":1040,"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/posts\/1001\/revisions\/1040"}],"wp:attachment":[{"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/media?parent=1001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/categories?post=1001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/risalog.org\/wp-json\/wp\/v2\/tags?post=1001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}