{"id":2361,"date":"2026-08-26T12:00:00","date_gmt":"2026-08-26T03:00:00","guid":{"rendered":"http:\/\/it-challenge.net\/?work=flexbox-factory"},"modified":"2026-10-25T04:22:07","modified_gmt":"2026-10-24T19:22:07","slug":"flexbox-factory","status":"publish","type":"work","link":"https:\/\/it-challenge.net\/?work=flexbox-factory","title":{"rendered":"Flexbox\u30d5\u30a1\u30af\u30c8\u30ea\u30fc"},"content":{"rendered":"

justify-content\u3068align-items\u3092\u7d44\u307f\u5408\u308f\u305b\u3001\u8377\u7269\u3092\u6307\u5b9a\u4f4d\u7f6e\u3078\u904b\u307c\u3046\u3002CSS Flexbox\u306e\u914d\u7f6e\u3092\u76f4\u611f\u7684\u306b\u5b66\u3079\u308b60\u79d2\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b2\u30fc\u30e0\u3067\u3059\u3002<\/p>\n

\u3053\u306e\u30b2\u30fc\u30e0\u306b\u3064\u3044\u3066<\/h2>\n

1\u56de\u306e\u30d7\u30ec\u30a4\u6642\u9593\u306e\u76ee\u5b89\u306f\u7d041\u5206\u3067\u3059\u3002\u4e3b\u306a\u64cd\u4f5c\u306f\u300c\u30bf\u30c3\u30d7\u30fb\u30af\u30ea\u30c3\u30af\u30fb\u77e2\u5370\u30ad\u30fc\u30fbEnter\u30ad\u30fc\u300d\u3067\u3059\u3002\u77ed\u3044\u30d7\u30ec\u30a4\u306e\u4e2d\u3067\u30eb\u30fc\u30eb\u3092\u7406\u89e3\u3057\u3001\u7d50\u679c\u3092\u898b\u306a\u304c\u3089\u7e70\u308a\u8fd4\u3057\u6311\u6226\u3067\u304d\u308b\u69cb\u6210\u3067\u3059\u3002<\/p>\n

\u30d7\u30ec\u30a4\u4e2d\u306f\u300cjustify-content\u304c\u4e3b\u8ef8\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6c7a\u3081\u308b\u3053\u3068\u300d\u300calign-items\u304c\u4ea4\u5dee\u8ef8\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6c7a\u3081\u308b\u3053\u3068\u300d\u300cflex-start\u30fbcenter\u30fbflex-end\u3092\u7d44\u307f\u5408\u308f\u305b\u305f9\u65b9\u5411\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u300d\u3092\u3001\u8aac\u660e\u3060\u3051\u3067\u306a\u304f\u5b9f\u969b\u306e\u64cd\u4f5c\u3068\u7d50\u679c\u3092\u901a\u3057\u3066\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n

\u30eb\u30fc\u30eb\u3068\u30b2\u30fc\u30e0\u306e\u4ed5\u7d44\u307f<\/h2>\n

Flexbox\u30d5\u30a1\u30af\u30c8\u30ea\u30fc\u3067\u306f\u3001\u753b\u9762\u306e\u6307\u793a\u3068\u7d50\u679c\u3092\u898b\u306a\u304c\u3089\u64cd\u4f5c\u3092\u9032\u3081\u307e\u3059\u3002\u7279\u306b\u300c\u6ce8\u6587\u30ab\u30fc\u30c9\u306b\u8868\u793a\u3055\u308c\u305f\u30bf\u30fc\u30b2\u30c3\u30c8\u4f4d\u7f6e\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002\u300d\u304c\u57fa\u672c\u3068\u306a\u308a\u3001\u64cd\u4f5c\u306b\u5bfe\u3059\u308b\u7d50\u679c\u3092\u78ba\u8a8d\u3057\u306a\u304c\u3089\u6b21\u306e\u624b\u9806\u3092\u5224\u65ad\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n

\u904a\u3073\u65b9<\/h2>\n
    \n
  1. \u6ce8\u6587\u30ab\u30fc\u30c9\u306b\u8868\u793a\u3055\u308c\u305f\u30bf\u30fc\u30b2\u30c3\u30c8\u4f4d\u7f6e\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/li>\n
  2. \u6a2a\u65b9\u5411\u306ejustify-content\u3068\u7e26\u65b9\u5411\u306ealign-items\u3092\u305d\u308c\u305e\u308c\u9078\u3073\u307e\u3059\u3002PC\u3067\u306f\u77e2\u5370\u30ad\u30fc\u3067\u3082\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/li>\n
  3. \u7bb1\u304c\u30bf\u30fc\u30b2\u30c3\u30c8\u306b\u91cd\u306a\u3063\u305f\u3089\u51fa\u8377\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u307e\u3059\u300260\u79d2\u4ee5\u5185\u306b12\u4ef6\u306e\u5b8c\u4e86\u3092\u76ee\u6307\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n

    \u653b\u7565\u30fb\u30d7\u30ec\u30a4\u306e\u30b3\u30c4<\/h2>\n
      \n
    • \u6700\u521d\u306e\u30d7\u30ec\u30a4\u3067\u306f\u30b9\u30b3\u30a2\u3060\u3051\u3092\u8ffd\u308f\u305a\u3001\u300c\u6ce8\u6587\u30ab\u30fc\u30c9\u306b\u8868\u793a\u3055\u308c\u305f\u30bf\u30fc\u30b2\u30c3\u30c8\u4f4d\u7f6e\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002\u300d\u3068\u3044\u3046\u57fa\u672c\u64cd\u4f5c\u3092\u78ba\u5b9f\u306b\u884c\u3044\u3001\u7d50\u679c\u304c\u3069\u3046\u5909\u5316\u3059\u308b\u304b\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/li>\n
    • \u300cjustify-content\u304c\u4e3b\u8ef8\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6c7a\u3081\u308b\u3053\u3068\u300d\u3092\u610f\u8b58\u3057\u3066\u30d7\u30ec\u30a4\u3059\u308b\u3068\u3001\u6b63\u89e3\u30fb\u5931\u6557\u306e\u7406\u7531\u304c\u5206\u304b\u308a\u3084\u3059\u304f\u306a\u308a\u3001\u6b21\u306e\u5224\u65ad\u3092\u6539\u5584\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/li>\n
    • 1\u56de\u306e\u76ee\u5b89\u306f\u7d041\u5206\u3067\u3059\u3002\u7d50\u679c\u753b\u9762\u3092\u898b\u305f\u3089\u3001\u524d\u56de\u3068\u9055\u3046\u64cd\u4f5c\u3084\u9806\u756a\u30921\u3064\u8a66\u3057\u3066\u518d\u6311\u6226\u3059\u308b\u3068\u3001\u4e0a\u9054\u306e\u30dd\u30a4\u30f3\u30c8\u3092\u898b\u3064\u3051\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n

      \u3053\u306e\u30b2\u30fc\u30e0\u3067\u8eab\u306b\u3064\u304f\u3053\u3068<\/h2>\n
        \n
      • justify-content\u304c\u4e3b\u8ef8\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6c7a\u3081\u308b\u3053\u3068<\/li>\n
      • align-items\u304c\u4ea4\u5dee\u8ef8\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6c7a\u3081\u308b\u3053\u3068<\/li>\n
      • flex-start\u30fbcenter\u30fbflex-end\u3092\u7d44\u307f\u5408\u308f\u305b\u305f9\u65b9\u5411\u306e\u30ec\u30a4\u30a2\u30a6\u30c8<\/li>\n<\/ul>\n

        \u6b63\u89e3\u3060\u3051\u3092\u899a\u3048\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u64cd\u4f5c\u3057\u305f\u5185\u5bb9\u3068\u753b\u9762\u306e\u5909\u5316\u3092\u898b\u6bd4\u3079\u306a\u304c\u3089\u3001\u306a\u305c\u305d\u306e\u7d50\u679c\u306b\u306a\u3063\u305f\u306e\u304b\u3092\u8003\u3048\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002\u30b2\u30fc\u30e0\u3092\u7e70\u308a\u8fd4\u3059\u3053\u3068\u3067\u3001\u77e5\u8b58\u3068\u5224\u65ad\u3092\u7d50\u3073\u4ed8\u3051\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n

        \u3053\u3093\u306a\u4eba\u306b\u304a\u3059\u3059\u3081<\/h2>\n

        CSS\u3084Web\u5236\u4f5c\u3092\u3053\u308c\u304b\u3089\u5b66\u3073\u305f\u3044\u5c0f\u5b66\u751f\u30fb\u4e2d\u5b66\u751f\u30fb\u9ad8\u6821\u751f\u30fb\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u521d\u5b66\u8005\u306b\u304a\u3059\u3059\u3081\u3067\u3059\u3002\u6c17\u8efd\u306b1\u56de\u904a\u3093\u3060\u3042\u3068\u3001\u7d50\u679c\u3092\u78ba\u8a8d\u3057\u306a\u304c\u3089\u7e70\u308a\u8fd4\u3057\u6311\u6226\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

        \u3088\u304f\u3042\u308b\u8cea\u554f<\/h2>\n
        \n

        Flexbox\u30d5\u30a1\u30af\u30c8\u30ea\u30fc\u306f\u7121\u6599\u3067\u904a\u3079\u307e\u3059\u304b\uff1f<\/h3>\n

        \u7121\u6599\u3067\u904a\u3079\u308b\u30d6\u30e9\u30a6\u30b6\u30b2\u30fc\u30e0\u3067\u3059\u3002\u30b2\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u958b\u3051\u3070\u3001\u305d\u306e\u307e\u307e\u30d7\u30ec\u30a4\u3092\u59cb\u3081\u3089\u308c\u307e\u3059\u3002<\/p>\n

        \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3084\u30d1\u30bd\u30b3\u30f3\u3067\u3082\u904a\u3079\u307e\u3059\u304b\uff1f<\/h3>\n

        \u30d6\u30e9\u30a6\u30b6\u5411\u3051\u306b\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002\u4e3b\u306a\u64cd\u4f5c\u306f\u300c\u30bf\u30c3\u30d7\u30fb\u30af\u30ea\u30c3\u30af\u30fb\u77e2\u5370\u30ad\u30fc\u30fbEnter\u30ad\u30fc\u300d\u3067\u3059\u3002\u7aef\u672b\u306b\u5408\u3063\u305f\u64cd\u4f5c\u65b9\u6cd5\u3067\u30d7\u30ec\u30a4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

        1\u56de\u306e\u30d7\u30ec\u30a4\u6642\u9593\u306f\u3069\u308c\u304f\u3089\u3044\u3067\u3059\u304b\uff1f<\/h3>\n

        \u30d7\u30ec\u30a4\u6642\u9593\u306e\u76ee\u5b89\u306f\u7d041\u5206\u3067\u3059\u3002\u77ed\u6642\u9593\u3067\u30eb\u30fc\u30eb\u3092\u78ba\u8a8d\u3057\u3001\u7d50\u679c\u3092\u898b\u306a\u304c\u3089\u7e70\u308a\u8fd4\u3057\u6311\u6226\u3067\u304d\u307e\u3059\u3002<\/p>\n

        \u3053\u306e\u30b2\u30fc\u30e0\u3067\u306f\u4f55\u3092\u5b66\u3079\u307e\u3059\u304b\uff1f<\/h3>\n

        \u30d7\u30ec\u30a4\u3092\u901a\u3057\u3066\u300cjustify-content\u304c\u4e3b\u8ef8\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6c7a\u3081\u308b\u3053\u3068\u300d\u300calign-items\u304c\u4ea4\u5dee\u8ef8\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6c7a\u3081\u308b\u3053\u3068\u300d\u300cflex-start\u30fbcenter\u30fbflex-end\u3092\u7d44\u307f\u5408\u308f\u305b\u305f9\u65b9\u5411\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u300d\u3068\u3044\u3063\u305f\u8003\u3048\u65b9\u3092\u3001\u64cd\u4f5c\u3068\u7d50\u679c\u3092\u7d50\u3073\u4ed8\u3051\u306a\u304c\u3089\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

        CSS\u306ejustify-content\u3068align-items\u3092\u9078\u3073\u3001\u7bb1\u3092\u76ee\u6a19\u4f4d\u7f6e\u3078\u52d5\u304b\u3059\u7121\u6599\u30d6\u30e9\u30a6\u30b6\u30b2\u30fc\u30e0\u3067\u3059\u3002Flexbox\u306e\u6a2a\u30fb\u7e26\u65b9\u5411\u306e\u914d\u7f6e\u309260\u79d2\u306e\u30d1\u30ba\u30eb\u3067\u76f4\u611f\u7684\u306b\u5b66\u3079\u307e\u3059\u3002<\/p>\n","protected":false},"featured_media":2363,"comment_status":"open","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"work_genre":[7],"work_platform":[6],"work_rotation":[],"work_learning_theme":[],"class_list":["post-2361","work","type-work","status-publish","has-post-thumbnail","hentry","work_genre-7","work_platform-6"],"uagb_featured_image_src":{"full":["https:\/\/it-challenge.net\/wp-content\/uploads\/2026\/08\/thumbnail-10.png",1200,675,false],"thumbnail":["https:\/\/it-challenge.net\/wp-content\/uploads\/2026\/08\/thumbnail-10-150x150.png",150,150,true],"medium":["https:\/\/it-challenge.net\/wp-content\/uploads\/2026\/08\/thumbnail-10-300x169.png",300,169,true],"medium_large":["https:\/\/it-challenge.net\/wp-content\/uploads\/2026\/08\/thumbnail-10-768x432.png",768,432,true],"large":["https:\/\/it-challenge.net\/wp-content\/uploads\/2026\/08\/thumbnail-10-1024x576.png",820,461,true],"1536x1536":["https:\/\/it-challenge.net\/wp-content\/uploads\/2026\/08\/thumbnail-10.png",1200,675,false],"2048x2048":["https:\/\/it-challenge.net\/wp-content\/uploads\/2026\/08\/thumbnail-10.png",1200,675,false],"kobo-card":["https:\/\/it-challenge.net\/wp-content\/uploads\/2026\/08\/thumbnail-10-640x480.png",640,480,true],"kobo-hero":["https:\/\/it-challenge.net\/wp-content\/uploads\/2026\/08\/thumbnail-10.png",1200,675,false]},"uagb_author_info":{"display_name":"","author_link":"https:\/\/it-challenge.net\/?author=0"},"uagb_comment_info":0,"uagb_excerpt":"CSS\u306ejustify-content\u3068align-items\u3092\u9078\u3073\u3001\u7bb1\u3092\u76ee\u6a19\u4f4d\u7f6e\u3078\u52d5\u304b\u3059\u7121\u6599\u30d6\u30e9\u30a6\u30b6\u30b2\u30fc\u30e0\u3067…","_links":{"self":[{"href":"https:\/\/it-challenge.net\/index.php?rest_route=\/wp\/v2\/work\/2361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it-challenge.net\/index.php?rest_route=\/wp\/v2\/work"}],"about":[{"href":"https:\/\/it-challenge.net\/index.php?rest_route=\/wp\/v2\/types\/work"}],"replies":[{"embeddable":true,"href":"https:\/\/it-challenge.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2361"}],"version-history":[{"count":329,"href":"https:\/\/it-challenge.net\/index.php?rest_route=\/wp\/v2\/work\/2361\/revisions"}],"predecessor-version":[{"id":20335,"href":"https:\/\/it-challenge.net\/index.php?rest_route=\/wp\/v2\/work\/2361\/revisions\/20335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/it-challenge.net\/index.php?rest_route=\/wp\/v2\/media\/2363"}],"wp:attachment":[{"href":"https:\/\/it-challenge.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2361"}],"wp:term":[{"taxonomy":"work_genre","embeddable":true,"href":"https:\/\/it-challenge.net\/index.php?rest_route=%2Fwp%2Fv2%2Fwork_genre&post=2361"},{"taxonomy":"work_platform","embeddable":true,"href":"https:\/\/it-challenge.net\/index.php?rest_route=%2Fwp%2Fv2%2Fwork_platform&post=2361"},{"taxonomy":"work_rotation","embeddable":true,"href":"https:\/\/it-challenge.net\/index.php?rest_route=%2Fwp%2Fv2%2Fwork_rotation&post=2361"},{"taxonomy":"work_learning_theme","embeddable":true,"href":"https:\/\/it-challenge.net\/index.php?rest_route=%2Fwp%2Fv2%2Fwork_learning_theme&post=2361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}