{"id":98,"date":"2025-07-10T07:44:08","date_gmt":"2025-07-09T22:44:08","guid":{"rendered":"https:\/\/kyum.chu.jp\/wp\/?p=98"},"modified":"2025-07-30T19:09:18","modified_gmt":"2025-07-30T10:09:18","slug":"css-flex%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9","status":"publish","type":"post","link":"https:\/\/achamaweb.tech\/?p=98","title":{"rendered":"CSS Flex\u306e\u4f7f\u3044\u65b9"},"content":{"rendered":"\n<style>\n    body {\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        margin: 20px;\n        background-color: #f4f4f4;\n        color: #333;\n    }\n    h1, h2 {\n        color: #0056b3;\n        border-bottom: 2px solid #0056b3;\n        padding-bottom: 5px;\n        margin-top: 30px;\n    }\n    table {\n        width: 100%;\n        border-collapse: collapse;\n        margin-bottom: 20px;\n        background-color: #fff;\n        box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n    }\n    th, td {\n        border: 1px solid #ddd;\n        padding: 12px 15px;\n        text-align: left;\n        vertical-align: top;\n    }\n    th {\n        background-color: #e9ecef;\n        color: #495057;\n        font-weight: bold;\n    }\n    tr:nth-child(even) {\n        background-color: #f8f9fa;\n    }\n    .property-name {\n        font-family: 'Consolas', 'Monaco', monospace;\n        color: #d63384; \/* Bootstrap's pink for code *\/\n        font-weight: bold;\n    }\n    .property-value {\n        font-family: 'Consolas', 'Monaco', monospace;\n        color: #007bff; \/* Bootstrap's blue for values *\/\n    }\n    .description {\n        color: #555;\n        line-height: 1.6;\n    }\n    .default-value {\n        font-weight: bold;\n    }\n<\/style>\n\n<div class=\"flex-cheat-box\">\n<h1>Flexbox\u30c1\u30fc\u30c8\u30b7\u30fc\u30c8<\/h1>\n<p>Flexbox\u306f\u3001CSS\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u3001\u7570\u306a\u308b\u30c7\u30d0\u30a4\u30b9\u3084\u753b\u9762\u30b5\u30a4\u30ba\u3067\u3082\u8981\u7d20\u3092\u52b9\u7387\u7684\u306b\u914d\u7f6e\u3057\u3001\u30b9\u30da\u30fc\u30b9\u3092\u914d\u5206\u3059\u308b\u305f\u3081\u306e\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002\u3053\u3053\u3067\u306f\u3001Flexbox\u306e\u4e3b\u8981\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u300c\u89aa\u8981\u7d20\uff08Flex\u30b3\u30f3\u30c6\u30ca\uff09\u300d\u3068\u300c\u5b50\u8981\u7d20\uff08Flex\u30a2\u30a4\u30c6\u30e0\uff09\u300d\u306b\u5206\u3051\u3066\u307e\u3068\u3081\u307e\u3057\u305f\u3002<\/p>\n<h2>\u89aa\u8981\u7d20\uff08Flex\u30b3\u30f3\u30c6\u30ca\uff09\u306e\u30d7\u30ed\u30d1\u30c6\u30a3<\/h2>\n<p>Flex\u30b3\u30f3\u30c6\u30ca\u306b\u9069\u7528\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u5b50\u8981\u7d20\u306e\u914d\u7f6e\u5168\u4f53\u3092\u5236\u5fa1\u3057\u307e\u3059\u3002<\/p>\n<table>\n<thead>\n<tr>\n<th>\u30d7\u30ed\u30d1\u30c6\u30a3<\/th>\n<th>\u5024<\/th>\n<th>\u8aac\u660e<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><span class=\"property-name\">display<\/span><\/td>\n<td><span class=\"property-value\">flex;<\/span><\/td>\n<td class=\"description\">\u8981\u7d20\u3092Flex\u30b3\u30f3\u30c6\u30ca\u306b\u3057\u307e\u3059\u3002Flexbox\u3092\u4f7f\u3046\u305f\u3081\u306b\u306f\u3001\u307e\u305a\u3053\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">flex-direction<\/span><\/td>\n<td><span class=\"property-value default-value\">row<\/span><br><span class=\"property-value\">row-reverse<\/span><br><span class=\"property-value\">column<\/span><br><span class=\"property-value\">column-reverse<\/span><\/td>\n<td class=\"description\">Flex\u30a2\u30a4\u30c6\u30e0\u304c\u914d\u7f6e\u3055\u308c\u308b\u4e3b\u8ef8\uff08\u30e1\u30a4\u30f3\u8ef8\uff09\u306e\u65b9\u5411\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\n<ul style=\"margin-top: 5px; padding-left: 20px;\">\n<li><span class=\"property-value default-value\">row<\/span>: \u30a2\u30a4\u30c6\u30e0\u3092\u5de6\u304b\u3089\u53f3\u3078\u6c34\u5e73\u306b\u4e26\u3079\u307e\u3059\uff08**\u521d\u671f\u5024**\uff09\u3002<\/li>\n<li><span class=\"property-value\">row-reverse<\/span>: \u30a2\u30a4\u30c6\u30e0\u3092\u53f3\u304b\u3089\u5de6\u3078\u6c34\u5e73\u306b\u4e26\u3079\u307e\u3059\u3002<\/li>\n<li><span class=\"property-value\">column<\/span>: \u30a2\u30a4\u30c6\u30e0\u3092\u4e0a\u304b\u3089\u4e0b\u3078\u5782\u76f4\u306b\u4e26\u3079\u307e\u3059\u3002<\/li>\n<li><span class=\"property-value\">column-reverse<\/span>: \u30a2\u30a4\u30c6\u30e0\u3092\u4e0b\u304b\u3089\u4e0a\u3078\u5782\u76f4\u306b\u4e26\u3079\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">flex-wrap<\/span><\/td>\n<td><span class=\"property-value default-value\">nowrap<\/span><br><span class=\"property-value\">wrap<\/span><br><span class=\"property-value\">wrap-reverse<\/span><\/td>\n<td class=\"description\">Flex\u30a2\u30a4\u30c6\u30e0\u304c\u30b3\u30f3\u30c6\u30ca\u5185\u3067\u53ce\u307e\u3089\u306a\u3044\u5834\u5408\u306b\u3001\u6298\u308a\u8fd4\u3059\u304b\u3069\u3046\u304b\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\n<ul style=\"margin-top: 5px; padding-left: 20px;\">\n<li><span class=\"property-value default-value\">nowrap<\/span>: \u6298\u308a\u8fd4\u3057\u307e\u305b\u3093\u3002\u3059\u3079\u3066\u306e\u30a2\u30a4\u30c6\u30e0\u304c1\u884c\u306b\u53ce\u307e\u308a\u307e\u3059\uff08**\u521d\u671f\u5024**\uff09\u3002<\/li>\n<li><span class=\"property-value\">wrap<\/span>: \u30a2\u30a4\u30c6\u30e0\u3092\u65b0\u3057\u3044\u884c\u306b\u6298\u308a\u8fd4\u3057\u307e\u3059\u3002<\/li>\n<li><span class=\"property-value\">wrap-reverse<\/span>: \u30a2\u30a4\u30c6\u30e0\u3092\u9006\u65b9\u5411\u306b\u6298\u308a\u8fd4\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">flex-flow<\/span><\/td>\n<td><span class=\"property-value\">&lt;flex-direction&gt; &lt;flex-wrap&gt;<\/span><\/td>\n<td class=\"description\"><span class=\"property-name\">flex-direction<\/span> \u3068 <span class=\"property-name\">flex-wrap<\/span> \u306e\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<br>\u4f8b: <span class=\"property-value\">flex-flow: row wrap;<\/span><\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">justify-content<\/span><\/td>\n<td><span class=\"property-value default-value\">flex-start<\/span><br><span class=\"property-value\">flex-end<\/span><br><span class=\"property-value\">center<\/span><br><span class=\"property-value\">space-between<\/span><br><span class=\"property-value\">space-around<\/span><br><span class=\"property-value\">space-evenly<\/span><\/td>\n<td class=\"description\">\u4e3b\u8ef8\uff08\u30e1\u30a4\u30f3\u8ef8\uff09\u306b\u6cbf\u3063\u305fFlex\u30a2\u30a4\u30c6\u30e0\u306e\u914d\u7f6e\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\n<ul style=\"margin-top: 5px; padding-left: 20px;\">\n<li><span class=\"property-value default-value\">flex-start<\/span>: \u958b\u59cb\u4f4d\u7f6e\u306b\u5bc4\u305b\u308b\uff08**\u521d\u671f\u5024**\uff09\u3002<\/li>\n<li><span class=\"property-value\">flex-end<\/span>: \u7d42\u4e86\u4f4d\u7f6e\u306b\u5bc4\u305b\u308b\u3002<\/li>\n<li><span class=\"property-value\">center<\/span>: \u4e2d\u592e\u306b\u914d\u7f6e\u3002<\/li>\n<li><span class=\"property-value\">space-between<\/span>: \u6700\u521d\u3068\u6700\u5f8c\u306e\u30a2\u30a4\u30c6\u30e0\u306f\u7aef\u306b\u914d\u7f6e\u3057\u3001\u6b8b\u308a\u306e\u30a2\u30a4\u30c6\u30e0\u306f\u5747\u7b49\u306b\u30b9\u30da\u30fc\u30b9\u3092\u914d\u5206\u3002<\/li>\n<li><span class=\"property-value\">space-around<\/span>: \u5404\u30a2\u30a4\u30c6\u30e0\u306e\u5de6\u53f3\u306b\u5747\u7b49\u306a\u30b9\u30da\u30fc\u30b9\u3092\u914d\u5206\u3002<\/li>\n<li><span class=\"property-value\">space-evenly<\/span>: \u5404\u30a2\u30a4\u30c6\u30e0\u9593\u306e\u30b9\u30da\u30fc\u30b9\u3068\u3001\u6700\u521d\u30fb\u6700\u5f8c\u306e\u30a2\u30a4\u30c6\u30e0\u3068\u30b3\u30f3\u30c6\u30ca\u306e\u7aef\u3068\u306e\u9593\u306e\u30b9\u30da\u30fc\u30b9\u3092\u3059\u3079\u3066\u5747\u7b49\u306b\u914d\u5206\u3002<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">align-items<\/span><\/td>\n<td><span class=\"property-value default-value\">stretch<\/span><br><span class=\"property-value\">flex-start<\/span><br><span class=\"property-value\">flex-end<\/span><br><span class=\"property-value\">center<\/span><br><span class=\"property-value\">baseline<\/span><\/td>\n<td class=\"description\">\u4ea4\u5dee\u8ef8\uff08\u30af\u30ed\u30b9\u8ef8\uff09\u306b\u6cbf\u3063\u305fFlex\u30a2\u30a4\u30c6\u30e0\u306e\u914d\u7f6e\u3092\u5b9a\u7fa9\u3057\u307e\u3059\uff08\u5782\u76f4\u65b9\u5411\u306e\u914d\u7f6e\uff09\u3002\n<ul style=\"margin-top: 5px; padding-left: 20px;\">\n<li><span class=\"property-value default-value\">stretch<\/span>: \u30a2\u30a4\u30c6\u30e0\u3092\u30b3\u30f3\u30c6\u30ca\u306e\u9ad8\u3055\u306b\u5408\u308f\u305b\u3066\u5f15\u304d\u4f38\u3070\u3057\u307e\u3059\uff08**\u521d\u671f\u5024**\uff09\u3002<\/li>\n<li><span class=\"property-value\">flex-start<\/span>: \u4ea4\u5dee\u8ef8\u306e\u958b\u59cb\u4f4d\u7f6e\u306b\u5bc4\u305b\u308b\u3002<\/li>\n<li><span class=\"property-value\">flex-end<\/span>: \u4ea4\u5dee\u8ef8\u306e\u7d42\u4e86\u4f4d\u7f6e\u306b\u5bc4\u305b\u308b\u3002<\/li>\n<li><span class=\"property-value\">center<\/span>: \u4ea4\u5dee\u8ef8\u306e\u4e2d\u592e\u306b\u914d\u7f6e\u3002<\/li>\n<li><span class=\"property-value\">baseline<\/span>: \u30a2\u30a4\u30c6\u30e0\u306e\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u306b\u5408\u308f\u305b\u3066\u914d\u7f6e\u3002<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">align-content<\/span><\/td>\n<td><span class=\"property-value default-value\">stretch<\/span><br><span class=\"property-value\">flex-start<\/span><br><span class=\"property-value\">flex-end<\/span><br><span class=\"property-value\">center<\/span><br><span class=\"property-value\">space-between<\/span><br><span class=\"property-value\">space-around<\/span><\/td>\n<td class=\"description\">\u8907\u6570\u884c\u306b\u6298\u308a\u8fd4\u3055\u308c\u305fFlex\u30a2\u30a4\u30c6\u30e0\u306e\u884c\u9593\u306e\u914d\u7f6e\u3092\u5b9a\u7fa9\u3057\u307e\u3059\uff08<span class=\"property-value\">flex-wrap: wrap;<\/span> \u306e\u5834\u5408\u306e\u307f\u6709\u52b9\uff09\u3002\u5358\u4e00\u884c\u306e\u5834\u5408\u306f\u52b9\u679c\u304c\u3042\u308a\u307e\u305b\u3093\u3002\n<ul style=\"margin-top: 5px; padding-left: 20px;\">\n<li><span class=\"property-value default-value\">stretch<\/span>: \u884c\u3092\u30b3\u30f3\u30c6\u30ca\u306e\u9ad8\u3055\u306b\u5408\u308f\u305b\u3066\u5f15\u304d\u4f38\u3070\u3057\u307e\u3059\uff08**\u521d\u671f\u5024**\uff09\u3002<\/li>\n<li><span class=\"property-value\">flex-start<\/span>: \u884c\u3092\u4ea4\u5dee\u8ef8\u306e\u958b\u59cb\u4f4d\u7f6e\u306b\u5bc4\u305b\u308b\u3002<\/li>\n<li><span class=\"property-value\">flex-end<\/span>: \u884c\u3092\u4ea4\u5dee\u8ef8\u306e\u7d42\u4e86\u4f4d\u7f6e\u306b\u5bc4\u305b\u308b\u3002<\/li>\n<li><span class=\"property-value\">center<\/span>: \u884c\u3092\u4ea4\u5dee\u8ef8\u306e\u4e2d\u592e\u306b\u914d\u7f6e\u3002<\/li>\n<li><span class=\"property-value\">space-between<\/span>: \u6700\u521d\u3068\u6700\u5f8c\u306e\u884c\u306f\u7aef\u306b\u914d\u7f6e\u3057\u3001\u6b8b\u308a\u306e\u884c\u306f\u5747\u7b49\u306b\u30b9\u30da\u30fc\u30b9\u3092\u914d\u5206\u3002<\/li>\n<li><span class=\"property-value\">space-around<\/span>: \u5404\u884c\u306e\u4e0a\u4e0b\u306b\u5747\u7b49\u306a\u30b9\u30da\u30fc\u30b9\u3092\u914d\u5206\u3002<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">gap<\/span><br>(<span class=\"property-name\">row-gap<\/span>, <span class=\"property-name\">column-gap<\/span>)<\/td>\n<td><span class=\"property-value\">&lt;length&gt;<\/span><br><span class=\"property-value\">&lt;row-gap&gt; &lt;column-gap&gt;<\/span><\/td>\n<td class=\"description\">Flex\u30a2\u30a4\u30c6\u30e0\u9593\u306e\u9593\u9694\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<span class=\"property-name\">gap<\/span> \u306f\u884c\u3068\u5217\u306e\u4e21\u65b9\u306b\u9069\u7528\u3067\u304d\u307e\u3059\u3002\n<ul style=\"margin-top: 5px; padding-left: 20px;\">\n<li>\u4f8b: <span class=\"property-value\">gap: 10px;<\/span> (\u884c\u3068\u5217\u306e\u4e21\u65b9\u306b10px\u306e\u9593\u9694)<\/li>\n<li>\u4f8b: <span class=\"property-value\">gap: 10px 20px;<\/span> (\u884c\u306b10px\u3001\u5217\u306b20px\u306e\u9593\u9694)<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>\u5b50\u8981\u7d20\uff08Flex\u30a2\u30a4\u30c6\u30e0\uff09\u306e\u30d7\u30ed\u30d1\u30c6\u30a3<\/h2>\n<p>Flex\u30a2\u30a4\u30c6\u30e0\u306b\u9069\u7528\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u500b\u3005\u306e\u30a2\u30a4\u30c6\u30e0\u306e\u632f\u308b\u821e\u3044\u3092\u5236\u5fa1\u3057\u307e\u3059\u3002<\/p>\n<table>\n<thead>\n<tr>\n<th>\u30d7\u30ed\u30d1\u30c6\u30a3<\/th>\n<th>\u5024<\/th>\n<th>\u8aac\u660e<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><span class=\"property-name\">order<\/span><\/td>\n<td><span class=\"property-value default-value\">0<\/span><\/td>\n<td class=\"description\">Flex\u30a2\u30a4\u30c6\u30e0\u306e\u8868\u793a\u9806\u5e8f\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u5024\u304c\u5c0f\u3055\u3044\u307b\u3069\u5148\u306b\u8868\u793a\u3055\u308c\u307e\u3059\uff08**\u521d\u671f\u5024\u306f0**\uff09\u3002<br>\u4f8b: <span class=\"property-value\">order: 1;<\/span><\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">flex-grow<\/span><\/td>\n<td><span class=\"property-value default-value\">0<\/span><\/td>\n<td class=\"description\">Flex\u30a2\u30a4\u30c6\u30e0\u304c\u3001\u30b3\u30f3\u30c6\u30ca\u5185\u306e\u4f59\u3063\u305f\u30b9\u30da\u30fc\u30b9\u3092\u3069\u308c\u3060\u3051\u300c\u62e1\u5927\u300d\u3059\u308b\u304b\u3092\u5b9a\u7fa9\u3057\u307e\u3059\uff08**\u521d\u671f\u5024\u306f0**\uff09\u3002<br>\u5024\u306f\u6bd4\u7387\u3067\u30010\u4ee5\u4e0a\u306e\u6570\u5024\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<br>\u4f8b: <span class=\"property-value\">flex-grow: 1;<\/span> (\u4f59\u3063\u305f\u30b9\u30da\u30fc\u30b9\u3092\u5747\u7b49\u306b\u62e1\u5927)<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">flex-shrink<\/span><\/td>\n<td><span class=\"property-value default-value\">1<\/span><\/td>\n<td class=\"description\">Flex\u30a2\u30a4\u30c6\u30e0\u304c\u3001\u30b3\u30f3\u30c6\u30ca\u306e\u30b9\u30da\u30fc\u30b9\u304c\u8db3\u308a\u306a\u3044\u5834\u5408\u306b\u3069\u308c\u3060\u3051\u300c\u7e2e\u5c0f\u300d\u3059\u308b\u304b\u3092\u5b9a\u7fa9\u3057\u307e\u3059\uff08**\u521d\u671f\u5024\u306f1**\uff09\u3002<br>\u5024\u306f\u6bd4\u7387\u3067\u30010\u4ee5\u4e0a\u306e\u6570\u5024\u3092\u6307\u5b9a\u3057\u307e\u3059\u30020\u306b\u3059\u308b\u3068\u7e2e\u5c0f\u3057\u307e\u305b\u3093\u3002<br>\u4f8b: <span class=\"property-value\">flex-shrink: 0;<\/span> (\u7e2e\u5c0f\u3057\u306a\u3044)<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">flex-basis<\/span><\/td>\n<td><span class=\"property-value default-value\">auto<\/span><br><span class=\"property-value\">&lt;length&gt;<\/span><\/td>\n<td class=\"description\">Flex\u30a2\u30a4\u30c6\u30e0\u306e\u521d\u671f\u30b5\u30a4\u30ba\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5e45\u3084\u9ad8\u3055\u306e\u3088\u3046\u306b\u6a5f\u80fd\u3057\u307e\u3059\u3002\n<ul style=\"margin-top: 5px; padding-left: 20px;\">\n<li><span class=\"property-value default-value\">auto<\/span>: \u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30b5\u30a4\u30ba\u306b\u57fa\u3065\u304f\uff08**\u521d\u671f\u5024**\uff09\u3002<\/li>\n<li><span class=\"property-value\">px<\/span>, <span class=\"property-value\">%<\/span>, <span class=\"property-value\">em<\/span> \u306a\u3069\u306e\u5358\u4f4d\u3067\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<p>\u4f8b: <span class=\"property-value\">flex-basis: 200px;<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">flex<\/span><\/td>\n<td><span class=\"property-value\">&lt;flex-grow&gt; &lt;flex-shrink&gt; &lt;flex-basis&gt;<\/span><\/td>\n<td class=\"description\"><span class=\"property-name\">flex-grow<\/span>, <span class=\"property-name\">flex-shrink<\/span>, <span class=\"property-name\">flex-basis<\/span> \u306e\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<br>\u4f8b: <span class=\"property-value\">flex: 1 1 auto;<\/span> (grow: 1, shrink: 1, basis: auto)<br>\u3088\u304f\u4f7f\u308f\u308c\u308b\u5024:\n<ul style=\"margin-top: 5px; padding-left: 20px;\">\n<li><span class=\"property-value default-value\">flex: 1;<\/span> (<span class=\"property-value default-value\">1 1 0%<\/span> \u3068\u540c\u7b49: \u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u306b\u5408\u308f\u305b\u3066\u62e1\u5927\u30fb\u7e2e\u5c0f\u3057\u3001\u521d\u671f\u30b5\u30a4\u30ba\u306f0)<\/li>\n<li><span class=\"property-value\">flex: auto;<\/span> (<span class=\"property-value default-value\">1 1 auto<\/span> \u3068\u540c\u7b49: \u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u306b\u5408\u308f\u305b\u3066\u62e1\u5927\u30fb\u7e2e\u5c0f\u3057\u3001\u521d\u671f\u30b5\u30a4\u30ba\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5e45)<\/li>\n<li><span class=\"property-value\">flex: none;<\/span> (<span class=\"property-value default-value\">0 0 auto<\/span> \u3068\u540c\u7b49: \u62e1\u5927\u3082\u7e2e\u5c0f\u3082\u305b\u305a\u3001\u521d\u671f\u30b5\u30a4\u30ba\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5e45)<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><span class=\"property-name\">align-self<\/span><\/td>\n<td><span class=\"property-value default-value\">auto<\/span><br><span class=\"property-value\">flex-start<\/span><br><span class=\"property-value\">flex-end<\/span><br><span class=\"property-value\">center<\/span><br><span class=\"property-value\">stretch<\/span><br><span class=\"property-value\">baseline<\/span><\/td>\n<td class=\"description\">\u500b\u3005\u306eFlex\u30a2\u30a4\u30c6\u30e0\u306e\u4ea4\u5dee\u8ef8\uff08\u30af\u30ed\u30b9\u8ef8\uff09\u306b\u6cbf\u3063\u305f\u914d\u7f6e\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<span class=\"property-name\">align-items<\/span> \u306e\u8a2d\u5b9a\u3092\u4e0a\u66f8\u304d\u3067\u304d\u307e\u3059\u3002\n<ul style=\"margin-top: 5px; padding-left: 20px;\">\n<li><span class=\"property-value default-value\">auto<\/span>: \u89aa\u306e <span class=\"property-name\">align-items<\/span> \u306e\u5024\u306b\u5f93\u3046\uff08**\u521d\u671f\u5024**\uff09\u3002<\/li>\n<li><span class=\"property-value\">flex-start<\/span>, <span class=\"property-value\">flex-end<\/span>, <span class=\"property-value\">center<\/span>, <span class=\"property-value\">stretch<\/span>, <span class=\"property-value\">baseline<\/span> (<span class=\"property-name\">align-items<\/span> \u3068\u540c\u3058\u5024\u3092\u4f7f\u7528)\u3002<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n\n\n<style>\n    \/* \u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\uff08\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\uff09\u306e\u30b9\u30bf\u30a4\u30eb *\/\n    .controls {\n        background-color: #ffffff;\n        padding: 20px;\n        border-radius: 12px; \/* \u89d2\u3092\u4e38\u304f\u3059\u308b *\/\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); \/* \u5f71\u3092\u8ffd\u52a0 *\/\n        margin-bottom: 30px;\n        display: grid; \/* \u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u914d\u7f6e *\/\n        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); \/* \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u5217 *\/\n        gap: 20px; \/* \u30b0\u30ea\u30c3\u30c9\u9593\u306e\u9593\u9694 *\/\n    }\n\n    .control-group {\n        display: flex;\n        flex-direction: column;\n    }\n\n    label {\n        margin-bottom: 8px;\n        font-weight: 600; \/* \u592a\u5b57 *\/\n        color: #34495e;\n        font-size: 0.95em;\n    }\n\n    select {\n        width: 100%;\n        padding: 10px 12px;\n        border: 1px solid #ced4da;\n        border-radius: 8px; \/* \u89d2\u3092\u4e38\u304f\u3059\u308b *\/\n        background-color: #e9ecef;\n        font-size: 1em;\n        cursor: pointer;\n        transition: border-color 0.2s, box-shadow 0.2s;\n    }\n\n    select:focus {\n        border-color: #007bff;\n        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n        outline: none;\n    }\n\n    \/* Flex\u30b3\u30f3\u30c6\u30ca\u306e\u30b9\u30bf\u30a4\u30eb *\/\n    .container {\n        display: flex; \/* Flex\u30b3\u30f3\u30c6\u30ca\u3068\u3057\u3066\u8a2d\u5b9a *\/\n        border: 3px dashed #a0aec0; \/* \u70b9\u7dda\u30dc\u30fc\u30c0\u30fc *\/\n        background-color: #ecf0f1; \/* \u8584\u3044\u30b0\u30ec\u30fc\u306e\u80cc\u666f *\/\n        min-height: 250px; \/* \u6700\u5c0f\u9ad8\u3055 *\/\n        padding: 15px;\n        border-radius: 12px; \/* \u89d2\u3092\u4e38\u304f\u3059\u308b *\/\n        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); \/* \u3088\u308a\u5f37\u3044\u5f71 *\/\n        transition: all 0.3s ease-in-out; \/* \u30b9\u30e0\u30fc\u30ba\u306a\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3 *\/\n    }\n\n    \/* Flex\u30a2\u30a4\u30c6\u30e0\u306e\u30b9\u30bf\u30a4\u30eb *\/\n    .item {\n        background-color: #3498db; \/* \u9752\u8272\u306e\u80cc\u666f *\/\n        color: white;\n        padding: 10px; \/* \u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u8abf\u6574 *\/\n        margin: 8px; \/* \u30a2\u30a4\u30c6\u30e0\u9593\u306e\u30de\u30fc\u30b8\u30f3 *\/\n        text-align: center;\n        border-radius: 8px; \/* \u89d2\u3092\u4e38\u304f\u3059\u308b *\/\n        font-weight: bold;\n        font-size: 1.1em;\n        display: flex; \/* \u30a2\u30a4\u30c6\u30e0\u5185\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092Flexbox\u3067\u914d\u7f6e *\/\n        flex-direction: column; \/* \u30a2\u30a4\u30c6\u30e0\u5185\u306e\u8981\u7d20\u3092\u7e26\u306b\u4e26\u3079\u308b *\/\n        align-items: center; \/* \u30a2\u30a4\u30c6\u30e0\u5185\u306e\u8981\u7d20\u3092\u4e2d\u592e\u63c3\u3048 *\/\n        justify-content: center;\n        \/*max-width: 10rem; \/* \u6700\u5c0f\u5e45 *\/\n        \/*min-height: 10remx; \/* \u6700\u5c0f\u9ad8\u3055 *\/\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); \/* \u30a2\u30a4\u30c6\u30e0\u306e\u5f71 *\/\n        transition: all 0.3s ease-in-out; \/* \u30b9\u30e0\u30fc\u30ba\u306a\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3 *\/\n        flex-grow: 1; \/* \u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u62e1\u5927\u3067\u304d\u308b\u3088\u3046\u306b\u8a2d\u5b9a *\/\n        flex-shrink: 1; \/* \u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u7e2e\u5c0f\u3067\u304d\u308b\u3088\u3046\u306b\u8a2d\u5b9a *\/\n        flex-basis: auto; \/* \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30d9\u30fc\u30b9\u30b5\u30a4\u30ba *\/\n    }\n\n    .item-label {\n        margin-bottom: 10px;\n        font-size: 1.2em;\n        color: #ffffff;\n        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\n    }\n\n    \/* \u30a2\u30a4\u30c6\u30e0\u5185\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u30b0\u30eb\u30fc\u30d7\u306e\u30b9\u30bf\u30a4\u30eb *\/\n    .item-controls {\n    background-color: rgba(255, 255, 255, 0.2);\n    padding: 10px;\n    border-radius: 8px;\n    margin-top: 10px;\n    display: flex; \/* \u3053\u3053\u3092flex\u306b\u5909\u66f4 *\/\n    flex-direction: column; \/* \u30a2\u30a4\u30c6\u30e0\u3092\u7e26\u65b9\u5411\u306b\u4e26\u3079\u308b *\/\n    gap: 10px; \/* \u30a2\u30a4\u30c6\u30e0\u9593\u306e\u7e26\u65b9\u5411\u306e\u30b9\u30da\u30fc\u30b9 *\/\n    width: 100%;\n\n    }\n\n    .item-controls label {\n        font-size: 0.85em;\n        margin-bottom: 3px;\n        color: #e0e0e0;\n        font-weight: normal;\n    }\n\n    .item-controls select {\n        padding: 5px 8px;\n        font-size: 0.85em;\n        background-color: rgba(255, 255, 255, 0.9);\n        border: 1px solid rgba(0, 0, 0, 0.1);\n        color: #333;\n    }\n\n    \/* \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 *\/\n    @media (max-width: 768px) {\n        .controls, .item-controls {\n            grid-template-columns: 1fr; \/* \u5c0f\u3055\u3044\u753b\u9762\u3067\u306f1\u5217\u306b\u3059\u308b *\/\n        }\n        .item {\n            min-width: unset; \/* \u6700\u5c0f\u5e45\u3092\u89e3\u9664 *\/\n            width: 100%; \/* \u5e45\u3092100%\u306b\u3059\u308b *\/\n        }\n    }\n\t\n    \/* \u7de8\u96c6\u5f8c\u306e CSS\u8a2d\u5b9a\u3092TextArea\u306b\u8868\u793a *\/\n    .styled-textarea {\n        \/* \u57fa\u672c\u30b5\u30a4\u30ba\u8a2d\u5b9a *\/\n        width: 30rem;  \/* \u5e45\u309220rem\u306b\u8a2d\u5b9a *\/\n        height: 8rem; \/* \u9ad8\u3055\u30928rem\u306b\u8a2d\u5b9a *\/\n\n        \/* \u898b\u305f\u76ee\u3092\u826f\u304f\u3059\u308b\u30b9\u30bf\u30a4\u30eb *\/\n        padding: 12px 15px; \/* \u5185\u5074\u306e\u4f59\u767d *\/\n        border: 1px solid #ccc; \/* \u63a7\u3048\u3081\u306a\u30dc\u30fc\u30c0\u30fc *\/\n        border-radius: 8px; \/* \u89d2\u3092\u4e38\u304f\u3059\u308b *\/\n        font-size: 0.8rem; \/* \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba *\/\n        line-height: 1.0; \/* \u884c\u306e\u9ad8\u3055\u3067\u8aad\u307f\u3084\u3059\u3055\u5411\u4e0a *\/\n        color: #333; \/* \u6587\u5b57\u8272 *\/\n        background-color: #fefefe; \/* \u308f\u305a\u304b\u306b\u660e\u308b\u3044\u80cc\u666f *\/\n        resize: vertical; \/* \u7e26\u65b9\u5411\u306e\u307f\u30ea\u30b5\u30a4\u30ba\u53ef\u80fd\u306b\u3059\u308b (\u6c34\u5e73\u65b9\u5411\u306f\u56fa\u5b9a) *\/\n        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); \/* \u308f\u305a\u304b\u306a\u5185\u5074\u306e\u5f71 *\/\n        transition: border-color 0.3s ease, box-shadow 0.3s ease; \/* \u30db\u30d0\u30fc\u30fb\u30d5\u30a9\u30fc\u30ab\u30b9\u6642\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n        box-sizing: border-box; \/* padding\u3068border\u3092width\/height\u306b\u542b\u3081\u308b *\/\n    }\n\n    .styled-textarea:focus {\n        border-color: #007bff; \/* \u30d5\u30a9\u30fc\u30ab\u30b9\u6642\u306b\u30dc\u30fc\u30c0\u30fc\u8272\u3092\u5909\u66f4 *\/\n        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); \/* \u30d5\u30a9\u30fc\u30ab\u30b9\u6642\u306e\u5916\u5074\u306e\u5f71 *\/\n        outline: none; \/* \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\u3092\u524a\u9664 *\/\n    }\n<\/style>\n\n\n<h1>\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6Flexbox\u30c7\u30e2<\/h1>\n\n<h2>\u89aa\u8981\u7d20\uff08Flex\u30b3\u30f3\u30c6\u30ca\uff09\u306e\u30d7\u30ed\u30d1\u30c6\u30a3<\/h2>\n<div class=\"controls\">\n    <div class=\"control-group\">\n        <label for=\"flexDirection\">flex-direction:<\/label>\n        <select id=\"flexDirection\" onchange=\"updateContainerStyle()\">\n            <option value=\"row\" selected>row (\u521d\u671f\u5024)<\/option>\n            <option value=\"row-reverse\">row-reverse<\/option>\n            <option value=\"column\">column<\/option>\n            <option value=\"column-reverse\">column-reverse<\/option>\n        <\/select>\n    <\/div>\n\n    <div class=\"control-group\">\n        <label for=\"flexWrap\">flex-wrap:<\/label>\n        <select id=\"flexWrap\" onchange=\"updateContainerStyle()\">\n            <option value=\"nowrap\" selected>nowrap (\u521d\u671f\u5024)<\/option>\n            <option value=\"wrap\">wrap<\/option>\n            <option value=\"wrap-reverse\">wrap-reverse<\/option>\n        <\/select>\n    <\/div>\n\n    <div class=\"control-group\">\n        <label for=\"justifyContent\">justify-content:<\/label>\n        <select id=\"justifyContent\" onchange=\"updateContainerStyle()\">\n            <option value=\"flex-start\" selected>flex-start (\u521d\u671f\u5024)<\/option>\n            <option value=\"flex-end\">flex-end<\/option>\n            <option value=\"center\">center<\/option>\n            <option value=\"space-between\">space-between<\/option>\n            <option value=\"space-around\">space-around<\/option>\n            <option value=\"space-evenly\">space-evenly<\/option>\n        <\/select>\n    <\/div>\n\n    <div class=\"control-group\">\n        <label for=\"alignItems\">align-items:<\/label>\n        <select id=\"alignItems\" onchange=\"updateContainerStyle()\">\n            <option value=\"stretch\" selected>stretch (\u521d\u671f\u5024)<\/option>\n            <option value=\"flex-start\">flex-start<\/option>\n            <option value=\"flex-end\">flex-end<\/option>\n            <option value=\"center\">center<\/option>\n            <option value=\"baseline\">baseline<\/option>\n        <\/select>\n    <\/div>\n\n    <div class=\"control-group\">\n        <label for=\"alignContent\">align-content:<\/label>\n        <select id=\"alignContent\" onchange=\"updateContainerStyle()\">\n            <option value=\"stretch\" selected>stretch (\u521d\u671f\u5024)<\/option>\n            <option value=\"flex-start\">flex-start<\/option>\n            <option value=\"flex-end\">flex-end<\/option>\n            <option value=\"center\">center<\/option>\n            <option value=\"space-between\">space-between<\/option>\n            <option value=\"space-around\">space-around<\/option>\n        <\/select>\n    <\/div>\n<\/div>\n\n<!-- Flex\u30b3\u30f3\u30c6\u30ca\u3068\u30a2\u30a4\u30c6\u30e0 -->\n<div class=\"container\" id=\"flexContainer\">\n    <!-- \u30a2\u30a4\u30c6\u30e0 1 -->\n    <div class=\"item\" id=\"item1\">\n        <div class=\"item-label\">\u30a2\u30a4\u30c6\u30e0 1<\/div>\n        <div class=\"item-controls\">\n            <div class=\"control-group\">\n                <label for=\"order-1\">order:<\/label>\n                <select id=\"order-1\" onchange=\"updateItemStyle('item1')\">\n                    <option value=\"0\" selected>0 (\u521d\u671f\u5024)<\/option>\n                    <option value=\"-1\">-1<\/option>\n                    <option value=\"1\">1<\/option>\n                    <option value=\"2\">2<\/option>\n                    <option value=\"3\">3<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"flexGrow-1\">flex-grow:<\/label>\n                <select id=\"flexGrow-1\" onchange=\"updateItemStyle('item1')\">\n                    <option value=\"1\" selected>1 (\u521d\u671f\u5024)<\/option> <!-- flex-grow\u306e\u521d\u671f\u5024\u30921\u306b\u5909\u66f4 -->\n                    <option value=\"0\">0<\/option>\n                    <option value=\"2\">2<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"flexShrink-1\">flex-shrink:<\/label>\n                <select id=\"flexShrink-1\" onchange=\"updateItemStyle('item1')\">\n                    <option value=\"1\" selected>1 (\u521d\u671f\u5024)<\/option>\n                    <option value=\"0\">0<\/option>\n                    <option value=\"2\">2<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"flexBasis-1\">flex-basis:<\/label>\n                <select id=\"flexBasis-1\" onchange=\"updateItemStyle('item1')\">\n                    <option value=\"auto\" selected>auto (\u521d\u671f\u5024)<\/option>\n                    <option value=\"50px\">50px<\/option>\n                    <option value=\"100px\">100px<\/option>\n                    <option value=\"150px\">150px<\/option>\n                    <option value=\"200px\">200px<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"alignSelf-1\">align-self:<\/label>\n                <select id=\"alignSelf-1\" onchange=\"updateItemStyle('item1')\">\n                    <option value=\"auto\" selected>auto (\u521d\u671f\u5024)<\/option>\n                    <option value=\"flex-start\">flex-start<\/option>\n                    <option value=\"flex-end\">flex-end<\/option>\n                    <option value=\"center\">center<\/option>\n                    <option value=\"stretch\">stretch<\/option>\n                    <option value=\"baseline\">baseline<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- \u30a2\u30a4\u30c6\u30e0 2 -->\n    <div class=\"item\" id=\"item2\">\n        <div class=\"item-label\">\u30a2\u30a4\u30c6\u30e0 2<\/div>\n        <div class=\"item-controls\">\n            <div class=\"control-group\">\n                <label for=\"order-2\">order:<\/label>\n                <select id=\"order-2\" onchange=\"updateItemStyle('item2')\">\n                    <option value=\"0\" selected>0 (\u521d\u671f\u5024)<\/option>\n                    <option value=\"-1\">-1<\/option>\n                    <option value=\"1\">1<\/option>\n                    <option value=\"2\">2<\/option>\n                    <option value=\"3\">3<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"flexGrow-2\">flex-grow:<\/label>\n                <select id=\"flexGrow-2\" onchange=\"updateItemStyle('item2')\">\n                    <option value=\"1\" selected>1 (\u521d\u671f\u5024)<\/option>\n                    <option value=\"0\">0<\/option>\n                    <option value=\"2\">2<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"flexShrink-2\">flex-shrink:<\/label>\n                <select id=\"flexShrink-2\" onchange=\"updateItemStyle('item2')\">\n                    <option value=\"1\" selected>1 (\u521d\u671f\u5024)<\/option>\n                    <option value=\"0\">0<\/option>\n                    <option value=\"2\">2<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"flexBasis-2\">flex-basis:<\/label>\n                <select id=\"flexBasis-2\" onchange=\"updateItemStyle('item2')\">\n                    <option value=\"auto\" selected>auto (\u521d\u671f\u5024)<\/option>\n                    <option value=\"50px\">50px<\/option>\n                    <option value=\"100px\">100px<\/option>\n                    <option value=\"150px\">150px<\/option>\n                    <option value=\"200px\">200px<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"alignSelf-2\">align-self:<\/label>\n                <select id=\"alignSelf-2\" onchange=\"updateItemStyle('item2')\">\n                    <option value=\"auto\" selected>auto (\u521d\u671f\u5024)<\/option>\n                    <option value=\"flex-start\">flex-start<\/option>\n                    <option value=\"flex-end\">flex-end<\/option>\n                    <option value=\"center\">center<\/option>\n                    <option value=\"stretch\">stretch<\/option>\n                    <option value=\"baseline\">baseline<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- \u30a2\u30a4\u30c6\u30e0 3 -->\n    <div class=\"item\" id=\"item3\">\n        <div class=\"item-label\">\u30a2\u30a4\u30c6\u30e0 3<\/div>\n        <div class=\"item-controls\">\n            <div class=\"control-group\">\n                <label for=\"order-3\">order:<\/label>\n                <select id=\"order-3\" onchange=\"updateItemStyle('item3')\">\n                    <option value=\"0\" selected>0 (\u521d\u671f\u5024)<\/option>\n                    <option value=\"-1\">-1<\/option>\n                    <option value=\"1\">1<\/option>\n                    <option value=\"2\">2<\/option>\n                    <option value=\"3\">3<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"flexGrow-3\">flex-grow:<\/label>\n                <select id=\"flexGrow-3\" onchange=\"updateItemStyle('item3')\">\n                    <option value=\"1\" selected>1 (\u521d\u671f\u5024)<\/option>\n                    <option value=\"0\">0<\/option>\n                    <option value=\"2\">2<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"flexShrink-3\">flex-shrink:<\/label>\n                <select id=\"flexShrink-3\" onchange=\"updateItemStyle('item3')\">\n                    <option value=\"1\" selected>1 (\u521d\u671f\u5024)<\/option>\n                    <option value=\"0\">0<\/option>\n                    <option value=\"2\">2<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"flexBasis-3\">flex-basis:<\/label>\n                <select id=\"flexBasis-3\" onchange=\"updateItemStyle('item3')\">\n                    <option value=\"auto\" selected>auto (\u521d\u671f\u5024)<\/option>\n                    <option value=\"50px\">50px<\/option>\n                    <option value=\"100px\">100px<\/option>\n                    <option value=\"150px\">150px<\/option>\n                    <option value=\"200px\">200px<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"control-group\">\n                <label for=\"alignSelf-3\">align-self:<\/label>\n                <select id=\"alignSelf-3\" onchange=\"updateItemStyle('item3')\">\n                    <option value=\"auto\" selected>auto (\u521d\u671f\u5024)<\/option>\n                    <option value=\"flex-start\">flex-start<\/option>\n                    <option value=\"flex-end\">flex-end<\/option>\n                    <option value=\"center\">center<\/option>\n                    <option value=\"stretch\">stretch<\/option>\n                    <option value=\"baseline\">baseline<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<hr>\n<label for=\"cssOutput\">\u73fe\u5728\u306eCSS\u5b9a\u7fa9<\/label><br>\n<textarea id=\"cssOutput\" class=\"styled-textarea\" readonly><\/textarea>\n\n<script>\n    \/\/ DOM\u8981\u7d20\u306e\u53c2\u7167\u3092\u53d6\u5f97\n    const flexContainer = document.getElementById('flexContainer');\n    const flexDirectionSelect = document.getElementById('flexDirection');\n    const flexWrapSelect = document.getElementById('flexWrap');\n    const justifyContentSelect = document.getElementById('justifyContent');\n    const alignItemsSelect = document.getElementById('alignItems');\n    const alignContentSelect = document.getElementById('alignContent');\n\n    \/**\n     * \u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u306e\u9078\u629e\u306b\u57fa\u3065\u3044\u3066Flex\u30b3\u30f3\u30c6\u30ca\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u66f4\u65b0\u3059\u308b\u95a2\u6570\n     *\/\n    function updateContainerStyle() {\n        flexContainer.style.flexDirection = flexDirectionSelect.value;\n        flexContainer.style.flexWrap = flexWrapSelect.value;\n        flexContainer.style.justifyContent = justifyContentSelect.value;\n        flexContainer.style.alignItems = alignItemsSelect.value;\n        flexContainer.style.alignContent = alignContentSelect.value;\n    }\n\n    \/**\n     * \u7279\u5b9a\u306eFlex\u30a2\u30a4\u30c6\u30e0\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u66f4\u65b0\u3059\u308b\u95a2\u6570\n     * @param {string} itemId - \u66f4\u65b0\u3059\u308b\u30a2\u30a4\u30c6\u30e0\u306eID (\u4f8b: 'item1')\n     *\/\n    function updateItemStyle(itemId) {\n        const item = document.getElementById(itemId);\n\n        \/\/ \u30a2\u30a4\u30c6\u30e0\u5185\u306e\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u3092\u53d6\u5f97\n        const orderSelect = item.querySelector('[id^=\"order\"]');\n        const flexGrowSelect = item.querySelector('[id^=\"flexGrow\"]');\n        const flexShrinkSelect = item.querySelector('[id^=\"flexShrink\"]');\n        const flexBasisSelect = item.querySelector('[id^=\"flexBasis\"]');\n        const alignSelfSelect = item.querySelector('[id^=\"alignSelf\"]');\n\n        \/\/ \u9078\u629e\u3055\u308c\u305f\u5024\u306b\u57fa\u3065\u3044\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\n        if (orderSelect) item.style.order = orderSelect.value;\n        if (flexGrowSelect) item.style.flexGrow = flexGrowSelect.value;\n        if (flexShrinkSelect) item.style.flexShrink = flexShrinkSelect.value;\n        if (flexBasisSelect) item.style.flexBasis = flexBasisSelect.value;\n        if (alignSelfSelect) item.style.alignSelf = alignSelfSelect.value;\n\n\t\tgenerateCssOutput();\n    }\n\n    \/**\n     * \u73fe\u5728\u306eFlexbox\u306eCSS\u5b9a\u7fa9\u3092\u751f\u6210\u3057\u3001textarea\u306b\u8868\u793a\u3059\u308b\u95a2\u6570\n     *\/\n    function generateCssOutput() {\n        let cssString = `\/* \u89aa\u8981\u7d20\uff08Flex\u30b3\u30f3\u30c6\u30ca\uff09\u306eCSS *\/\n.flex-parent {\n  display: flex;\n  width: 90%;\n  min-height: 300px;\n  border: 3px solid #3498db;\n  background-color: #ecf0f1;\n  margin: 30px auto;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  flex-direction: ${flexDirectionSelect.value};\n  flex-wrap: ${flexWrapSelect.value};\n  justify-content: ${justifyContentSelect.value};\n  align-items: ${alignItemsSelect.value};\n  align-content: ${alignContentSelect.value};\n}\n`;\n\n            for(num=1;num<4;num++) {\n                \/\/ \u5404\u30a2\u30a4\u30c6\u30e0\u306e\u30b9\u30bf\u30a4\u30eb\u5024\u3092\u53d6\u5f97\n                const orderVal = document.getElementById(`order-${num}`).value;\n                const flexGrowVal = document.getElementById(`flexGrow-${num}`).value;\n                const flexShrinkVal = document.getElementById(`flexShrink-${num}`).value;\n                const flexBasisVal = document.getElementById(`flexBasis-${num}`).value;\n                const alignSelfVal = document.getElementById(`alignSelf-${num}`).value;\n\t\tlet cssChild = `\n\/* \u5b50\u8981\u7d20 ${num}\uff08Flex\u30a2\u30a4\u30c6\u30e0\uff09\u306e\u5171\u901aCSS *\/\n.flex-child-${num} {\n  width: 100px;\n  height: 100px;\n  color: white;\n  display: flex;\n  order: ${orderVal};\n  flex-grow: ${flexGrowVal};\n  flex-shrink: ${flexShrinkVal};\n  flex-basis: ${flexBasisVal};\n  align-self: ${alignSelfVal};\n  justify-content: center;\n  align-items: center;\n  font-size: 1.2rem;\n  font-weight: bold;\n  margin: 10px;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n`;\n\t\t\t\tcssString += cssChild;\n            }\n            cssOutput.value = cssString;\n        }\n    \/\/ \u30da\u30fc\u30b8\u30ed\u30fc\u30c9\u6642\u306b\u521d\u671f\u30b9\u30bf\u30a4\u30eb\u3092\u9069\u7528\n    document.addEventListener('DOMContentLoaded', () => {\n        updateContainerStyle(); \/\/ \u30b3\u30f3\u30c6\u30ca\u306e\u521d\u671f\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\n        \/\/ \u5404\u30a2\u30a4\u30c6\u30e0\u306e\u521d\u671f\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\n        const itemIds = ['item1', 'item2', 'item3'];\n        itemIds.forEach(id => updateItemStyle(id));\n\t\tgenerateCssOutput();\n    });\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Flexbox\u30c1\u30fc\u30c8\u30b7\u30fc\u30c8 Flexbox\u306f\u3001CSS\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u3001\u7570\u306a\u308b\u30c7\u30d0\u30a4\u30b9\u3084\u753b\u9762\u30b5\u30a4\u30ba\u3067\u3082\u8981\u7d20\u3092\u52b9\u7387\u7684\u306b\u914d\u7f6e\u3057\u3001\u30b9\u30da\u30fc\u30b9\u3092\u914d\u5206\u3059\u308b\u305f\u3081\u306e\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002\u3053\u3053\u3067\u306f\u3001Flexbox\u306e\u4e3b\u8981\u306a\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u300c\u89aa [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10],"tags":[8,9],"class_list":["post-98","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-flex"],"acf":[],"_links":{"self":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=98"}],"version-history":[{"count":24,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/98\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/98\/revisions\/265"}],"wp:attachment":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=98"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=98"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}