{"id":3009,"date":"2020-08-16T09:01:25","date_gmt":"2020-08-16T00:01:25","guid":{"rendered":"https:\/\/fastcoding.jp\/blog\/?p=3009"},"modified":"2020-09-03T15:52:38","modified_gmt":"2020-09-03T06:52:38","slug":"css-flexbox2","status":"publish","type":"post","link":"https:\/\/fastcoding.jp\/blog\/all\/info\/css-flexbox2\/","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011CSS Flexbox \u30d7\u30ed\u30d1\u30c6\u30a3\u307e\u3068\u3081"},"content":{"rendered":"

\u3053\u3093\u306b\u3061\u306f\u3002FASTCODING\u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u4e03\u8ee2\u3073\u516b\u91cd\u5b50\u3067\u3059\u3002
\n\u524d\u56de\u300cFlexbox\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\uff09\u300d\u3092\u4f7f\u3063\u305f\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u4ed5\u65b9\u3092\u307e\u3068\u3081\u3066\u307f\u307e\u3057\u305f\u3002\u4eca\u56de\u306f\u3001\u89aa\u8981\u7d20\uff08.flex-container\uff09\u3068\u5b50\u8981\u7d20\uff08.flex-item\uff09\u306b\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u307e\u3068\u3081\u3067\u3059\u3002
\n

\"\"<\/div>
FASTCODING BLOG<\/div><\/div>
\"\"<\/figure>
\u30102020\u5e74\u7248\u3011CSS Flexbox \u5b9f\u8df5\uff01\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u308b<\/div>
\u3053\u3093\u306b\u3061\u306f\u3002FASTCODING\u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u4e03\u8ee2\u3073\u516b\u91cd\u5b50\u3067\u3059\u3002CSS\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u6642\u3001\u4e00\u6614\u524d\u306ffloat\u306a\u3069\u3092\u4f7f\u3063\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u65b9\u6cd5\u304c\u4e00\u822c\u7684\u3067\u3057\u305f\u304c\u3001\u6700\u8fd1\u3067\u306f\u300cFlexbox\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\uff09\u300d\u3092\u4f7f\u3063\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u3059\u308b\u65b9\u6cd5\u304c\u3088\u304f\u4f7f\u308f\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002Can I Use\u306b\u3088\u308b\u30012020\u5e747\u6708\u73fe\u5728\u306eFlexbox\u306e\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\u72b6\u6cc1\u306f\u3001\u57fa\u672c\u7684\u306b\u3069\u306e\u30d6\u30e9\u30a6\u30b6\u3082\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u306fFlexbox\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u304c\u3001IE\u306b\u306f\u82e5\u5e72\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002Internet Explorer\u306e\u5bfe\u5fdc\u72b6\u6cc1\u6700\u65b0\u306eIE 11\u3067\u3001\u3044\u304f\u3064\u304b\u30d0\u30b0\u304c\u5831\u544a\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001Flexbox\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306fIE...<\/div><\/div>
<\/div><\/div><\/a><\/div><\/div><\/p>\n

\u76ee\u6b21<\/span>
\nCSS Flexbox\u306e\u57fa\u672c\u306e\u8a18\u8ff0<\/a>
\n\u89aa\u8981\u7d20\uff08.flex-container\uff09\u306b\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/a>
\n\u3000\u3000\uff11. \u5b50\u8981\u7d20\u306e\u4e26\u3076\u5411\u304d – flex-direction: \u25cb\u25cb;<\/a>
\n\u3000\u3000\uff12. \u5b50\u8981\u7d20\u306e\u6298\u308a\u8fd4\u3057 – flex-wrap: \u25cb\u25cb;<\/a>
\n\u3000\u3000\uff13. \u6c34\u5e73\u65b9\u5411\u306e\u63c3\u3048 – justify-content: \u25cb\u25cb;<\/a>
\n\u3000\u3000\uff14. \u5782\u76f4\u65b9\u5411\u306e\u63c3\u3048 – align-items: \u25cb\u25cb;<\/a>
\n\u3000\u3000\uff15. \u8907\u6570\u884c\u306b\u3057\u305f\u6642\u306e\u63c3\u3048 – align-content: \u25cb\u25cb;<\/a>
\n\u5b50\u8981\u7d20\uff08.flex-item\uff09\u306b\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/a>
\n\u3000\u3000\uff11. \u9806\u5e8f\u306e\u6307\u5b9a – order: \u25cb\u25cb;<\/a>
\n\u3000\u3000\uff12. \u5b50\u8981\u7d20\u306e\u6a2a\u5e45\u304c\u5e83\u304c\u308b\u6bd4\u7387 – flex-grow: \u25cb\u25cb;<\/a>
\n\u3000\u3000\uff13. \u5b50\u8981\u7d20\u306e\u6a2a\u5e45\u304c\u7e2e\u3080\u6bd4\u7387 – flex-shrink: \u25cb\u25cb;<\/a>
\n\u3000\u3000\uff14. \u5b50\u8981\u7d20\u306e\u5e45\u3092\u6307\u5b9a – flex-shrink: \u25cb\u25cb;<\/a>
\n\u3000\u3000\uff15. \u5b50\u8981\u7d20\u306e\u5782\u76f4\u65b9\u5411\u306e\u63c3\u3048 – align-self: \u25cb\u25cb;<\/a>
\n\u307e\u3068\u3081<\/a><\/p>\n


\u3000\u3000<\/p>\n

CSS Flexbox\u306e\u57fa\u672c\u306e\u8a18\u8ff0<\/h2>\n

CSS Flexbox\u306e\u57fa\u672c\u306f\u3001<\/span>
\n\u30fb\u30b3\u30f3\u30c6\u30ca\uff08\u89aa\u8981\u7d20\uff09
\n\u30fb\u30a2\u30a4\u30c6\u30e0\uff08\u5b50\u8981\u7d20\uff09
\n\u3068\u3044\u30462\u3064\u306e\u8981\u7d20\u306b\u3088\u3063\u3066\u69cb\u6210\u3055\u308c\u307e\u3059\u3002\u30b3\u30f3\u30c6\u30ca\uff08\u89aa\u8981\u7d20\uff09\u306e\u4e2d\u306b\u3001\u30a2\u30a4\u30c6\u30e0\uff08\u5b50\u8981\u7d20\uff09\u3092\u5165\u308c\u3066HTML\u306f\u5b8c\u4e86\u3067\u3059\u3002\n<\/p>\n

\"\"<\/p>\n

\r\n<nav>\r\n  <ul class="flex-container">\r\n    <li class="flex-item"><a href="#">Item 1<\/a><\/li>\r\n    <li class="flex-item"><a href="#">Item 2<\/a><\/li>\r\n    <li class="flex-item"><a href="#">Item 3<\/a><\/li>\r\n    <li class="flex-item"><a href="#">Item 4<\/a><\/li>\r\n    <li class="flex-item"><a href="#">Item 5<\/a><\/li>\r\n  <\/ul>\r\n<\/nav>\r\n<\/pre>\n
\u3053\u306e\u5834\u5408\u3001 \u89aa\u8981\u7d20\u304c flex-container \u5b50\u8981\u7d20\u304c flex-item <\/span>\u306b\u306a\u308a\u307e\u3059\u3002\u30d7\u30ed\u30d1\u30c6\u30a3\u30fc\u3092\u8a2d\u5b9a\u3057\u3066\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u8abf\u6574\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n

<\/p>\n
\u89aa\u8981\u7d20\uff08.flex-container\uff09\u306b\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/h2>\n

<\/p>\n
\uff11. \u5b50\u8981\u7d20\u306e\u4e26\u3076\u5411\u304d – flex-direction: \u25cb\u25cb;<\/h3>\n
\"\"<\/p>\n
\r\n.flex-container {\r\n  display: flex;\r\n\r\n  flex-direction: row; \/* \u5de6\u304b\u3089\u53f3\u306b\u914d\u7f6e *\/\r\n  flex-direction: row-reverse; \/* \u53f3\u304b\u3089\u5de6\u306b\u914d\u7f6e *\/ \r\n  flex-direction: column; \/* \u4e0a\u304b\u3089\u4e0b\u306b\u914d\u7f6e *\/\r\n  flex-direction: column-reverse; \/* \u4e0b\u304b\u3089\u4e0a\u306b\u914d\u7f6e *\/\r\n}\r\n<\/pre>\n

<\/p>\n
\uff12. \u5b50\u8981\u7d20\u306e\u6298\u308a\u8fd4\u3057 – flex-wrap: \u25cb\u25cb;<\/h3>\n
\"\"<\/p>\n
\r\n.flex-container {\r\n  display: flex;\r\n\r\n  flex-wrap: nowrap; \/* \u6298\u308a\u8fd4\u3057\u306a\u3057 *\/\r\n  flex-wrap: wrap; \/* \u5b50\u8981\u7d20\u3092\u4e0a\u304b\u3089\u4e0b\u306b\u6298\u308a\u8fd4\u3057 *\/ \r\n  flex-wrap: wrap-reverse; \/* \u5b50\u8981\u7d20\u3092\u4e0b\u304b\u3089\u4e0a\u306b\u6298\u308a\u8fd4\u3057 *\/\r\n}\r\n<\/pre>\n
\u6a2a\u4e26\u3073\u3068\u6298\u308a\u8fd4\u3057\u3092\u4e00\u62ec\u6307\u5b9a<\/h4>\n
flex-direction \u3068 flex-wrap \u3092\u4e00\u62ec\u6307\u5b9a\u3067\u304d\u308b\u306e\u304c\u3001 flex-flow <\/span>\u3067\u3059\u3002<\/p>\n
\r\n.flex-container {\r\n  display: flex;\r\n\r\n  flex-flow: row\u3000nowrap; \/* \u5de6\u304b\u3089\u53f3\u306b\u914d\u7f6e \u30fb \u6298\u308a\u8fd4\u3057\u306a\u3057 *\/\r\n}\r\n<\/pre>\n

<\/p>\n
\uff13. \u6c34\u5e73\u65b9\u5411\u306e\u63c3\u3048 – justify-content: \u25cb\u25cb;<\/h3>\n
\"\"<\/p>\n
\r\n.flex-container {\r\n  display: flex;\r\n\r\n  justify-content: flex-start; \/* \u5de6\u63c3\u3048 *\/\r\n  justify-content: flex-end ; \/* \u53f3\u63c3\u3048 *\/\r\n  justify-content: center; \/* \u4e2d\u592e\u63c3\u3048 *\/\r\n  justify-content: space-between; \/* \u6700\u521d\u3068\u6700\u5f8c\u306e\u5b50\u8981\u7d20\u3092\u4e21\u7aef\u3001\u6b8b\u308a\u306f\u5747\u7b49\u306b\u914d\u7f6e *\/\r\n  justify-content: space-around; \/* \u5168\u3066\u5747\u7b49\u306b\u9593\u9694\u3092\u3042\u3051\u3066\u914d\u7f6e *\/\r\n}\r\n<\/pre>\n

<\/p>\n
\uff14. \u5782\u76f4\u65b9\u5411\u306e\u63c3\u3048 – align-items: \u25cb\u25cb;<\/h3>\n
\"\"<\/p>\n
\r\n.flex-container {\r\n  display: flex;\r\n\r\n  align-items: stretch; \/* \u89aa\u8981\u7d20\u306e\u9ad8\u3055\u3001\u307e\u305f\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u4e00\u756a\u591a\u3044\u5b50\u8981\u7d20\u306e\u9ad8\u3055\u306b\u5408\u308f\u305b\u3066\u914d\u7f6e *\/\r\n  align-items: flex-start ; \/* \u4e0a\u63c3\u3048 *\/\r\n  align-items: flex-end; \/* \u4e0b\u63c3\u3048 *\/\r\n  align-items: center; \/* \u4e2d\u592e\u63c3\u3048 *\/\r\n  align-items: baseline; \/* \u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u3067\u914d\u7f6e *\/\r\n}\r\n<\/pre>\n

<\/p>\n
\uff15. \u8907\u6570\u884c\u306b\u3057\u305f\u6642\u306e\u63c3\u3048 – align-content: \u25cb\u25cb;<\/h3>\n
\"\"<\/p>\n
\r\n.flex-container {\r\n  display: flex;\r\n\r\n  align-content: stretch; \/* \u89aa\u8981\u7d20\u306e\u9ad8\u3055\u306b\u5408\u308f\u305b\u3066\u5e83\u3052\u3066\u914d\u7f6e *\/\r\n  align-content: flex-start ; \/* \u89aa\u8981\u7d20\u306e\u958b\u59cb\u4f4d\u7f6e\u304b\u3089\u914d\u7f6e\u3002\u4e0a\u63c3\u3048 *\/\r\n  align-content: flex-end; \/* \u89aa\u8981\u7d20\u306e\u7d42\u70b9\u304b\u3089\u914d\u7f6e\u3002\u4e0b\u63c3\u3048 *\/\r\n  align-content: center; \/* \u4e2d\u592e\u63c3\u3048 *\/\r\n  align-content: space-between; \/* \u6700\u521d\u3068\u6700\u5f8c\u306e\u5b50\u8981\u7d20\u3092\u4e21\u7aef\u3001\u6b8b\u308a\u306f\u5747\u7b49\u306b\u914d\u7f6e *\/\r\n  align-content: space-around; \/* \u5168\u3066\u5747\u7b49\u306b\u9593\u9694\u3092\u3042\u3051\u3066\u914d\u7f6e *\/\r\n}\r\n<\/pre>\n

<\/p>\n
\u5b50\u8981\u7d20\uff08.flex-item\uff09\u306b\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/h2>\n

<\/p>\n
\uff11. \u9806\u5e8f\u306e\u6307\u5b9a – order: \u25cb\u25cb;<\/h3>\n
\"\"
\n \u901a\u5e38\u306fHTML\u306e\u9806\u756a\u306b\u4e26\u3073\u307e\u3059\u304c\u3001\u4e26\u3076\u9806\u756a\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002\u30de\u30a4\u30ca\u30b9\u306e\u6307\u5b9a\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
\r\n  .flex-item1 { order: 2; }\r\n  .flex-item2 { order: 3; }\r\n  .flex-item3 { order: 1; }\r\n}\r\n<\/pre>\n

<\/p>\n
\uff12. \u5b50\u8981\u7d20\u306e\u6a2a\u5e45\u304c\u5e83\u304c\u308b\u6bd4\u7387 – flex-grow: \u25cb\u25cb;<\/h3>\n
\"\"
\n\u89aa\u8981\u7d20\u306b\u30b9\u30da\u30fc\u30b9\u304c\u3042\u3063\u305f\u5834\u5408\u3001\u6307\u5b9a\u306e\u3042\u308b\u5b50\u8981\u7d20\u304c\u4ed6\u306e\u5b50\u8981\u7d20\u306b\u5bfe\u3057\u3066\u3069\u308c\u304f\u3089\u3044\u6a2a\u5e45\u304c\u4f38\u3073\u308b\u304b\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u30de\u30a4\u30ca\u30b9\u306e\u6307\u5b9a\u306f\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n
\r\n  .flex-item1 { flex-grow: 1; }\r\n  .flex-item2 { flex-grow: 2; }\r\n  .flex-item3 { flex-grow: 1; }\r\n}\r\n<\/pre>\n

<\/p>\n
\uff13. \u5b50\u8981\u7d20\u306e\u6a2a\u5e45\u304c\u7e2e\u3080\u6bd4\u7387 – flex-shrink: \u25cb\u25cb;<\/h3>\n
\"\"<\/p>\n
flex-grow \u3068\u9006\u3067\u3059\u3002\u89aa\u8981\u7d20\u306b\u30b9\u30da\u30fc\u30b9\u304c\u306a\u304f\u3059\u3079\u3066\u306e\u5b50\u8981\u7d20\u304c\u5165\u308a\u5207\u3089\u306a\u3044\u5834\u5408\u3001\u6307\u5b9a\u306e\u3042\u308b\u5b50\u8981\u7d20\u304c\u4ed6\u306e\u5b50\u8981\u7d20\u306b\u5bfe\u3057\u3066\u3069\u308c\u304f\u3089\u3044\u7e2e\u3080\u304b\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u30de\u30a4\u30ca\u30b9\u306e\u6307\u5b9a\u306f\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n
\r\n  .flex-item1 { flex-shrink: 1; }\r\n  .flex-item2 { flex-shrink: 2; }\r\n  .flex-item3 { flex-shrink: 1; }\r\n}\r\n<\/pre>\n

<\/p>\n
\uff14. \u5b50\u8981\u7d20\u306e\u5e45\u3092\u6307\u5b9a – flex-basis: \u25cb\u25cb;<\/h3>\n
\"\"<\/p>\n
width \u3068\u540c\u3058\u3088\u3046\u306b\u5b50\u8981\u7d20\u306e\u5e45\u306e\u5024\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002auto \u6307\u5b9a\u3057\u305f\u5834\u5408\u306f\u5b50\u8981\u7d20\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30b5\u30a4\u30ba\u304c\u9069\u5fdc\u3055\u308c\u307e\u3059\u3002<\/p>\n
\r\n  .flex-item1 { flex-basis: auto; }\r\n  .flex-item2 { flex-basis: 250px; }\r\n  .flex-item3 { flex-basis: 30%; }\r\n}\r\n<\/pre>\n

<\/p>\n
\uff15. \u5b50\u8981\u7d20\u306e\u5782\u76f4\u65b9\u5411\u306e\u63c3\u3048 – align-self: \u25cb\u25cb;<\/h3>\n
\u89aa\u8981\u7d20\u306b\u6307\u5b9a\u3059\u308b align-items \u3068\u5168\u304f\u540c\u3058\u3067\u3059\u304c\u3001\u3053\u306e align-self \u6307\u5b9a\u306f\u3001\u89aa\u8981\u7d20\u306b\u8a18\u8ff0\u3059\u308b align-items \u3088\u308a\u3082\u512a\u5148\u3055\u308c\u307e\u3059\u3002<\/p>\n
\"\"<\/p>\n
\r\n  .flex-item1 { flex-self: auto; }\r\n  .flex-item2 { flex-self: stretch; }\r\n  .flex-item3 { flex-self: flex-start; }\r\n  .flex-item4 { flex-self: flex-end; }\r\n  .flex-item5 { flex-self: center; }\r\n  .flex-item6 { flex-self: baseline; }\r\n}\r\n<\/pre>\n
flex\u3067\u5b50\u8981\u7d20\u306e\u6307\u5b9a\u3092\u307e\u3068\u3081\u308b<\/h4>\n
flex-grow\u3001flex-shrink\u3001flex-basis\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a<\/span>\u3067\u304d\u307e\u3059\u3002
\n.item1 {
\n  flex: 0 1 250px; \/* flex-grow\u3001flex-shrink\u3001flex-basis\u306e\u9806 *\/
\n}<\/p>\n
<\/br id=\"no4\"><\/p>\n
\u307e\u3068\u3081<\/h2>\n
\u4eca\u56de\u306f\u3001\u300cFlexbox\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\uff09\u300d\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u307e\u3068\u3081\u307e\u3057\u305f\u3002\u6163\u308c\u308b\u307e\u3067\u306f\u3001\u5927\u5909\u3067\u3059\u304c\u3088\u304f\u4f7f\u3046\u6307\u5b9a\u306f\u899a\u3048\u3066\u3057\u307e\u3044\u307e\u3057\u3087\u3046\uff01\uff01<\/p>\n
\"\"<\/div>
FASTCODING BLOG<\/div><\/div>
\"\"<\/figure>
\u30102020\u5e74\u7248\u3011CSS Flexbox \u5b9f\u8df5\uff01\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u308b<\/div>
\u3053\u3093\u306b\u3061\u306f\u3002FASTCODING\u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u4e03\u8ee2\u3073\u516b\u91cd\u5b50\u3067\u3059\u3002CSS\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u6642\u3001\u4e00\u6614\u524d\u306ffloat\u306a\u3069\u3092\u4f7f\u3063\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u65b9\u6cd5\u304c\u4e00\u822c\u7684\u3067\u3057\u305f\u304c\u3001\u6700\u8fd1\u3067\u306f\u300cFlexbox\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\uff09\u300d\u3092\u4f7f\u3063\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u3059\u308b\u65b9\u6cd5\u304c\u3088\u304f\u4f7f\u308f\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002Can I Use\u306b\u3088\u308b\u30012020\u5e747\u6708\u73fe\u5728\u306eFlexbox\u306e\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\u72b6\u6cc1\u306f\u3001\u57fa\u672c\u7684\u306b\u3069\u306e\u30d6\u30e9\u30a6\u30b6\u3082\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u306fFlexbox\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u304c\u3001IE\u306b\u306f\u82e5\u5e72\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002Internet Explorer\u306e\u5bfe\u5fdc\u72b6\u6cc1\u6700\u65b0\u306eIE 11\u3067\u3001\u3044\u304f\u3064\u304b\u30d0\u30b0\u304c\u5831\u544a\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001Flexbox\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306fIE...<\/div><\/div>
<\/div><\/div><\/a><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"
\u3053\u3093\u306b\u3061\u306f\u3002FASTCODING\u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u4e03\u8ee2\u3073\u516b\u91cd\u5b50\u3067\u3059\u3002 \u524d\u56de\u300cFlexbox\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\uff09\u300d\u3092\u4f7f\u3063\u305f\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u4ed5\u65b9\u3092\u307e\u3068\u3081\u3066\u307f\u307e\u3057\u305f\u3002\u4eca\u56de\u306f\u3001\u89aa\u8981\u7d20\uff08.flex-container\uff09\u3068\u5b50\u8981\u7d20\uff08.flex […]<\/p>\n","protected":false},"author":16,"featured_media":3126,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[13,12,5,11],"tags":[31,16],"class_list":["post-3009","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-webdesign","category-info","category-other","tag-web","tag-16"],"acf":[],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2020\/08\/1.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/3009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/comments?post=3009"}],"version-history":[{"count":24,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/3009\/revisions"}],"predecessor-version":[{"id":3011,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/3009\/revisions\/3011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/media\/3126"}],"wp:attachment":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/media?parent=3009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/categories?post=3009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/tags?post=3009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}