{"id":9625,"date":"2024-02-03T02:16:26","date_gmt":"2024-02-02T17:16:26","guid":{"rendered":"https:\/\/colors-themes.com\/clock\/?p=9625"},"modified":"2025-08-21T00:32:01","modified_gmt":"2025-08-20T15:32:01","slug":"css-flexbox","status":"publish","type":"post","link":"https:\/\/colors-themes.com\/clock\/css-flexbox\/","title":{"rendered":"CSS\u306eFlexbox\u306e\u307e\u3068\u3081"},"content":{"rendered":"\n

CSS\u306eFlexbox\u306e\u307e\u3068\u3081<\/span><\/h1>\n\n\n\n
<\/div>\n\n\n\n

CSS\u306eFlexbox\u306e\u30e1\u30e2\u3067\u3059\u3002
Flexbox\u306f\u89aa\u8981\u7d20\u3068\u5b50\u8981\u7d20\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002
\u203b\u5b6b\u8981\u7d20\u306b\u306f\u5f71\u97ff\u3057\u307e\u305b\u3093\u3002IE\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u306a\u3051\u308c\u3070\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306f\u4e0d\u8981\u3002<\/p>\n\n\n\n

<\/div>\n\n\n\n
<div class=\"parent\">\n\t<div class=\"child1\">1<\/div>\n\t<div class=\"child2\">2<\/div>\n\t<div class=\"child3\">3<\/div>\n<\/div><\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\u89aa\u8981\u7d20<\/span><\/h1>\n\n\n\n
<\/div>\n\n\n\n
\u89aa\u8981\u7d20\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30b3\u30f3\u30c6\u30ca\uff09\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7<\/strong><\/p>\n\n\n\n
.parent {\n\t\/* \u89aa\u8981\u7d20\u3068\u3057\u3066\u5b9a\u7fa9 *\/\n\tdisplay: flex;\n\tdisplay: inline-flex;\n\n\t\/* \u5b50\u8981\u7d20\u306e\u65b9\u5411\u3092\u6307\u5b9a *\/\n\tflex-direction: row;\n\tflex-direction: row-reverse;\n\tflex-direction: column;\n\tflex-direction: colmn-reverse;\n\n\t\/* \u5b50\u8981\u7d20\u306e\u6298\u308a\u8fd4\u3057\u3092\u6307\u5b9a *\/\n\tflex-wrap: nowrap;\n\tflex-wrap: wrap;\n\tflex-wrap: wrap-reverse;\n\n\t\/* \u5b50\u8981\u7d20\u306e\u6c34\u5e73\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a *\/\n\tjustify-content: flex-start;\n\tjustify-content: flex-end;\n\tjustify-content: center;\n\tjustify-content: space-between;\n\tjustify-content: space-around;\n\n\t\/* \u5b50\u8981\u7d20\u306e\u5782\u76f4\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a *\/\n\talign-items: stretch;\n\talign-items: flex-start;\n\talign-items: flex-end;\n\talign-items: center;\n\talign-items: baseline;\n\n\t\/* \u8907\u6570\u306e\u5b50\u8981\u7d20\u306e\u884c\u306e\u914d\u7f6e\u3092\u6307\u5b9a *\/\n\talign-content: stretch;\n\talign-content: flex-start;\n\talign-content: flex-end;\n\talign-content: center;\n\talign-content: space-between;\n\talign-content: space-around;\n\n\t\/* flex-direction, flex-wrap\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a *\/\n\tflex-flow: row nowrap;\n}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\u5b50\u8981\u7d20<\/span><\/h1>\n\n\n\n
<\/div>\n\n\n\n
\u5b50\u8981\u7d20\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30a2\u30a4\u30c6\u30e0\uff09\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7<\/strong><\/p>\n\n\n\n
.child1 {\n\t\/* \u5b50\u8981\u7d20\u306e\u4f38\u3073\u3092\u6307\u5b9a\uff080:\u4f38\u3073\u306a\u3044\u30011:\u5747\u7b49\u30012:\u4ed6\u306e2\u500d\u4f38\u3073\u308b\uff09 *\/\n\tflex-grow: 0;\n\n\t\/* \u5b50\u8981\u7d20\u306e\u7e2e\u307f\u3092\u6307\u5b9a\uff081:\u5747\u7b49\u30010:\u7e2e\u307e\u306a\u3044\uff09 *\/\n\tflex-shrink: 1;\n\n\t\/* \u5b50\u8981\u7d20\u306e\u521d\u671f\u30b5\u30a4\u30ba\u3092\u6307\u5b9a\uff08auto:\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30b5\u30a4\u30ba\u30010:\u30b5\u30a4\u30ba\u306a\u3057\uff09 *\/\n\tflex-basis: auto;\n\n\t\/* \u5b50\u8981\u7d20\u306e\u5782\u76f4\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a *\/\n\talign-self: auto;\n\n\t\/* \u5b50\u8981\u7d20\u306e\u4e26\u3073\u9806\u3092\u6307\u5b9a *\/\n\torder: 0;\n\n\t\/* flex-grow, flex-shrink, flex-basis\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a *\/\n\tflex: 0 1 auto ;\n}<\/code><\/pre>\n\n\n\n
<\/div>\n","protected":false},"excerpt":{"rendered":"
CSS\u306eFlexbox\u306e\u30e1\u30e2\u3067\u3059\u3002Flexbox\u306f\u89aa\u8981\u7d20\u3068\u5b50\u8981\u7d20\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002\u203b\u5b6b\u8981\u7d20\u306b\u306f\u5f71\u97ff\u3057\u307e\u305b\u3093\u3002IE\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u306a\u3051\u308c\u3070\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306f\u4e0d\u8981\u3002 \u89aa\u8981\u7d20\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30b3\u30f3\u30c6\u30ca\uff09\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7 \u5b50\u8981\u7d20\uff08\u30d5\u30ec...<\/p>\n","protected":false},"author":1,"featured_media":8813,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[150],"tags":[],"class_list":["post-9625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-create-theme"],"_links":{"self":[{"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/posts\/9625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/comments?post=9625"}],"version-history":[{"count":6,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/posts\/9625\/revisions"}],"predecessor-version":[{"id":13830,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/posts\/9625\/revisions\/13830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/media\/8813"}],"wp:attachment":[{"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/media?parent=9625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/categories?post=9625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colors-themes.com\/clock\/wp-json\/wp\/v2\/tags?post=9625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}