{"id":16,"date":"2021-05-21T16:30:01","date_gmt":"2021-05-21T07:30:01","guid":{"rendered":"http:\/\/gaku-on.com\/?p=16"},"modified":"2022-09-26T10:25:09","modified_gmt":"2022-09-26T01:25:09","slug":"%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%81%ab-flex","status":"publish","type":"post","link":"http:\/\/gaku-on.com\/?p=16","title":{"rendered":"\u6a2a\u4e26\u3073\u306b flex"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-creive-\u30af\u30ea\u30fc\u30d6 wp-block-embed-creive-\u30af\u30ea\u30fc\u30d6\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"4kw7xNaHUo\"><a href=\"https:\/\/creive.me\/archives\/15427\/\">\u3010CSS\u3011Flexbox\u306e\u4f7f\u3044\u65b9\u3092\u5fb9\u5e95\u89e3\u8aac\uff01\u57fa\u672c\u304b\u3089\u5b9f\u8df5\u307e\u3067(\u30b5\u30f3\u30d7\u30eb\u3042\u308a)<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u3010CSS\u3011Flexbox\u306e\u4f7f\u3044\u65b9\u3092\u5fb9\u5e95\u89e3\u8aac\uff01\u57fa\u672c\u304b\u3089\u5b9f\u8df5\u307e\u3067(\u30b5\u30f3\u30d7\u30eb\u3042\u308a)&#8221; &#8212; creive(\u30af\u30ea\u30fc\u30d6)\" src=\"https:\/\/creive.me\/archives\/15427\/embed\/#?secret=iYEoc2USwR#?secret=4kw7xNaHUo\" data-secret=\"4kw7xNaHUo\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">.\u89aa\u8981\u7d20{<br>&nbsp; display: flex;<br>}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3067\u6a2a\u4e26\u3073\uff01<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.\u89aa\u8981\u7d20{<br>&nbsp; display: flex;<br><strong>flex-direction: column;<\/strong><br>}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3046\u3059\u308b\u3068\u3001\u3088\u3053100%\u3067\u7e26\u306a\u3089\u3073\u306b\u306a\u308b<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.\u89aa\u8981\u7d20{<br>&nbsp; display: flex;<br><strong>&nbsp; flex-wrap: wrap;<\/strong><br>}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3046\u3059\u308b\u3068\u306f\u307f\u51fa\u305f\u5b50\u8981\u7d20\u306f\u4e0b\u306b\u6539\u884c\u3055\u308c\u308b<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u4f7f\u3048\u308b\uff01<br>.svbox{<br>&nbsp; &nbsp; display: flex;<br>&nbsp; &nbsp;&nbsp;<strong>justify-content: space-between;<\/strong><br>}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6a2a\u4e26\u3073\u8981\u7d20\u3092\u5747\u7b49\u914d\u7f6e\u3067\u304d\u308b<br>\u4e00\u756a\u306f\u3057\u3063\u3053\u306f\u30d4\u30c3\u30bf\u30ea\u914d\u7f6e\u3055\u308c\u308b<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u3010\u5b8c\u74a7\uff01\u3011\u30ae\u30e3\u30e9\u30ea\u30fc\u306a\u3069\u306e\u4e00\u89a7\u306f\u3053\u3061\u3089\u304c\u3044\u3044\u3093\u3058\u3083\u306a\u3044\u304b<br><br><a href=\"https:\/\/webtan.tech\/space-between-lastline\/\">https:\/\/webtan.tech\/space-between-lastline\/<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"gazoulist\"&gt;\n  &lt;div class=\"item\"&gt;Item 1&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;Item 2&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;Item 3&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;Item 4&lt;\/div&gt;\n&lt;div class=\"item\"&gt;Item 5&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u6ce8\u610f\u70b9\u306f\u3001<\/strong><br>\u30fb<strong>\u7591\u4f3c\u8981\u7d20\u306f\u89aa\u306e\u30cf\u30b3\u306b\u6307\u5b9a\u3059\u308b\u3053\u3068\u3001<\/strong><br>\u30fb<strong>\u7591\u4f3c\u8981\u7d20\u306e\u5927\u304d\u3055\u306f\u3001\u5b50\u8981\u7d20\u306e\u30cf\u30b3(\u3053\u3053\u3067\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u5185\u5bb9)\u3068\u540c\u3058\u5e45\u306b\u3059\u308b\u3053\u3068\u3002<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u30b9\u30de\u30db\u30b5\u30a4\u30ba\u3067\u306f\u3000\u6a2a\u5e45\u309250%\u306b\u3059\u308b\u3068\u304b\u306e\u6307\u793a\u3092\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\uff1f\u3000\u3061\u3087\u3063\u3068\u7d0d\u5f97\u3044\u304b\u306a\u3044\u304c\u30fb\u30fb\u30fb<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.gazoulist {\n  display: flex;\n  flex-wrap: wrap;\n    justify-content: space-between;\n}\n\n.item{\n    background-color: #67A0B8;\n    width: 30%;\n}\n\n.gazoulist::after {\ndisplay: block;\ncontent:\"\";\nwidth: 30%;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\u6a2a\u306a\u3089\u3073\uff14\u5217\u306e\u5834\u5408after\u3060\u3051\u3067\u306f\u8db3\u308a\u306a\u3044\u306e\u3067\u4ee5\u4e0b\u306ebefore\u3082\u5fc5\u8981\n\n.yoko_box::before{\n  content:\"\";\n  display: block;\n  width:30%;\n  order:1;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>.\u89aa\u8981\u7d20{&nbsp; display: flex&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":6,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":204,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/16\/revisions\/204"}],"wp:attachment":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}