{"id":5267,"date":"2021-01-29T14:10:49","date_gmt":"2021-01-29T05:10:49","guid":{"rendered":"http:\/\/www.otwo.jp\/blog\/?p=5267"},"modified":"2021-01-29T14:10:49","modified_gmt":"2021-01-29T05:10:49","slug":"css_flexbox","status":"publish","type":"post","link":"https:\/\/www.otwo.jp\/blog\/css_flexbox\/","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011CSS Flexbox\u306e\u7a2e\u985e\u30fb\u4f7f\u3044\u65b9"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/css_flexbox_main.png\" alt=\"\" width=\"700\" height=\"400\" class=\"alignnone size-full wp-image-5608\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/css_flexbox_main.png 700w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/css_flexbox_main-150x86.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/css_flexbox_main-300x171.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>\u3053\u3093\u306b\u3061\u306f\u3002Web\u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u5c71\u672c\u3067\u3059\u3002<br \/>\n\u4eca\u66f4\u3067\u3059\u304cCSS flexbox\u306e\u7a2e\u985e\u3084\u8a73\u7d30\u3001\u4f7f\u3044\u65b9\u306e\u4f8b\u306a\u3069\u3092\u4fdd\u5b58\u7248\u3068\u3057\u3066\u307e\u3068\u3081\u305f\u306e\u3067\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<div class=\"pageContents\">\n<p class=\"title\">\u3082\u304f\u3058<\/p>\n<dl>\n<dt><a href=\"#step1\">CSS Flexbox\u3068\u306f\uff1f<\/a><\/dt>\n<dt><a href=\"#step2\">\u5404\u8aac\u660e<\/a><\/dt>\n<dt><a href=\"#step2-1\">\u89aa\u8981\u7d20\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7<\/a><\/dt>\n<dd><a href=\"#con1\">\u4e26\u3076\u5411\u304d\uff1aflex-direction<\/a><\/dd>\n<dd><a href=\"#con2\">\u6298\u308a\u8fd4\u3057\u65b9\uff1aflex-wrap<\/a><\/dd>\n<dd><a href=\"#con3\">\u4e26\u3076\u5411\u304d\u3068\u6298\u308a\u8fd4\u3057\u65b9\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a\uff1aflex-flow<\/a><\/dd>\n<dd><a href=\"#con4\">\u6c34\u5e73\u65b9\u5411\u306e\u914d\u7f6e\uff1ajustify-content<\/a><\/dd>\n<dd><a href=\"#con5\">\u5782\u76f4\u65b9\u5411\u306e\u914d\u7f6e\uff1aalign-items<\/a><\/dd>\n<dd><a href=\"#con6\">\u8907\u6570\u884c\u306e\u5782\u76f4\u65b9\u5411\u306e\u914d\u7f6e\uff1aalign-content<\/a><\/dd>\n<dt><a href=\"#step2-2\">\u5b50\u8981\u7d20\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7<\/a><\/a><\/dt>\n<dd><a href=\"#con7\">\u9806\u5e8f\u306e\u6307\u5b9a\uff1aorder<\/a><\/dd>\n<dd><a href=\"#con8\">\u5b50\u8981\u7d20\u306e\u4f38\u3073\u308b\u6bd4\u7387\uff1aflex-grow<\/a><\/dd>\n<dd><a href=\"#con9\">\u5b50\u8981\u7d20\u306e\u7e2e\u3080\u6bd4\u7387\uff1aflex-shrink<\/a><\/dd>\n<dd><a href=\"#con10\">\u5b50\u8981\u7d20\u306e\u30d9\u30fc\u30b9\u3068\u306a\u308b\u5e45\u306e\u6307\u5b9a\uff1aflex-basis<\/a><\/dd>\n<dd><a href=\"#con11\">flex-grow\u3001flex-shrink\u3001flex-basis\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a\uff1aflex<\/a><\/dd>\n<dd><a href=\"#con12\">\u5b50\u8981\u7d20\u306e\u5782\u76f4\u65b9\u5411\u306e\u63c3\u3048\uff1aalign-self<\/a><\/dd>\n<\/dl>\n<\/div>\n<h1 id=\"step1\">CSS Flexbox\u3068\u306f\uff1f<\/h1>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_info.png\" alt=\"\" width=\"861\" height=\"213\" class=\"alignnone size-full wp-image-5400\" \/><\/p>\n<pre class=\"brush: python\r; notranslate\"><div class=\"container\">\r\n     <div class=\"item\"><\/div>\r\n<\/div>\r\n<\/pre>\n<p>CSS Flexbox\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\uff09\u3068\u306f\u3001Flexible Box Module\u306e\u7565\u3067CSS\u3067\u7c21\u5358\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u3053\u3068\u304c\u51fa\u6765\u308b\u624b\u6cd5\u306e\u3053\u3068\u3067\u3059\u3002<br \/>\n\u4e0a\u56f3\u306e\u3088\u3046\u306bflex\u30b3\u30f3\u30c6\u30ca\uff08\u89aa\u8981\u7d20\uff09\u3068flex\u30a2\u30a4\u30c6\u30e0\uff08\u5b50\u8981\u7d20\uff09\u3068\u547c\u3070\u308c\u308b\u69cb\u6210\u3067\u51fa\u6765\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u4eca\u307e\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u969b\u306b\u3001inline-block\u3084float\u3092\u4f7f\u3063\u305f\u308a\u3057\u3066\u3044\u307e\u3057\u305f\u304cflexbox\u3092\u4f7f\u3046\u3068\u3082\u3063\u3068\u7c21\u5358\u306b\u7d44\u3080\u3053\u3068\u304c\u3067\u304d\u3061\u3083\u3044\u307e\u3059\u3002<\/p>\n<h3>\u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1<\/h3>\n<p>\u4ee5\u524d\u306f\u30b5\u30dd\u30fc\u30c8\u3082\u3042\u307e\u308a\u591a\u304f\u306a\u304b\u3063\u305f\u306e\u3067\u4f7f\u7528\u5834\u9762\u304c\u9650\u3089\u308c\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u73fe\u5728\u306f\u307b\u307c\u5168\u3066\u306e\u30d6\u30e9\u30a6\u30b6\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/caniuse.com\/#search=CSS%20Flexible%20Box%20Layout%20Module\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Flexible Box Layout Module \u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1<\/a><\/p>\n<h1 id=\"step2\">\u5404\u8aac\u660e<\/h1>\n<p>\u3067\u306f\u65e9\u901f\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\u307e\u305a\u306f\u65e9\u898b\u8868\u3092\u3069\u3046\u305e\u3002<br \/>\n\u203b\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u8a73\u3057\u3044\u8aac\u660e\u306b\u98db\u3073\u307e\u3059\u3002<\/p>\n<style>\n.con{\n  background: #f5f2ed;\n}\n.con2{\n  background: #f4f4f4;\n}\n.con2.pageContents{\n  margin: 0 auto 0;\n  line-height : 1.6em;\n}\n.tl{\n  margin:7% 0 2%;\n}\n.details{\n  display:flex;\n  flex-wrap:wrap;\n  align-items:flex-end;\n}\n.details div{\n  margin:1%;\n}\n.tl a:hover,\n.details a:hover{\n  opacity:0.6;\n}\n.flex{\n  display:flex;\n  flex-wrap: wrap;\n}\n.flex img{\n  margin:1%;\n}\n<\/style>\n<div class=\"con pageContents\">\n<p class=\"title\" id=\"step2-1\">\u89aa\u8981\u7d20\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7<\/p>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con1\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_tl.png\" alt=\"\" width=\"228\" height=\"36\" class=\"alignnone size-full wp-image-5290\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_tl.png 228w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_tl-150x24.png 150w\" sizes=\"(max-width: 228px) 100vw, 228px\" \/><\/a>\n<\/div>\n<div class=\"details\">\n<div><a href=\"#con1\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_row.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5288\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_row.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_row-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con1\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_rowre.png\" alt=\"\" width=\"200\" height=\"147\" class=\"alignnone size-full wp-image-5289\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_rowre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_rowre-150x110.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con1\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_col.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5291\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_col.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_col-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con1\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_colre.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5292\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_colre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_colre-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con2\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_tl.png\" alt=\"\" width=\"211\" height=\"36\" class=\"alignnone size-full wp-image-5332\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_tl.png 211w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_tl-150x26.png 150w\" sizes=\"(max-width: 211px) 100vw, 211px\" \/><\/a>\n<\/div>\n<div class=\"details\">\n<div><a href=\"#con2\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_no.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5335\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_no.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_no-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con2\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrap.png\" alt=\"\" width=\"200\" height=\"146\" class=\"alignnone size-full wp-image-5337\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrap.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrap-150x110.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con2\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrapre.png\" alt=\"\" width=\"200\" height=\"146\" class=\"alignnone size-full wp-image-5336\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrapre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrapre-150x110.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con3\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_flow_tl.png\" alt=\"\" width=\"465\" height=\"36\" class=\"alignnone size-full wp-image-5383\" \/><\/a>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con4\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_tl.png\" alt=\"\" width=\"304\" height=\"36\" class=\"alignnone size-full wp-image-5342\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_tl.png 304w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_tl-150x18.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_tl-300x36.png 300w\" sizes=\"(max-width: 304px) 100vw, 304px\" \/><\/a>\n<\/div>\n<div class=\"details\">\n<div><a href=\"#con4\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_start.png\" alt=\"\" width=\"200\" height=\"85\" class=\"alignnone size-full wp-image-5341\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_start.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_start-150x64.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con4\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_end.png\" alt=\"\" width=\"200\" height=\"83\" class=\"alignnone size-full wp-image-5340\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_end.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_end-150x62.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con4\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_center.png\" alt=\"\" width=\"200\" height=\"81\" class=\"alignnone size-full wp-image-5345\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_center.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_center-150x61.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con4\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_between.png\" alt=\"\" width=\"200\" height=\"82\" class=\"alignnone size-full wp-image-5344\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_between.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_between-150x62.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con4\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_around.png\" alt=\"\" width=\"200\" height=\"82\" class=\"alignnone size-full wp-image-5343\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_around.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_around-150x62.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con5\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_tl.png\" alt=\"\" width=\"271\" height=\"36\" class=\"alignnone size-full wp-image-5350\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_tl.png 271w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_tl-150x20.png 150w\" sizes=\"(max-width: 271px) 100vw, 271px\" \/><\/a>\n<\/div>\n<div class=\"details\">\n<div><a href=\"#con5\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_stre.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5349\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_stre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_stre-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con5\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_start.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5348\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_start.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_start-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con5\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_end.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5353\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_end.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_end-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con5\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_center.png\" alt=\"\" width=\"200\" height=\"148\" class=\"alignnone size-full wp-image-5352\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_center.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_center-150x111.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con5\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_baseline.png\" alt=\"\" width=\"200\" height=\"148\" class=\"alignnone size-full wp-image-5352\"\/><\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con6\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_con_tl.png\" alt=\"\" width=\"361\" height=\"36\" class=\"alignnone size-full wp-image-5594\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_con_tl.png 361w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_con_tl-150x15.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_con_tl-300x30.png 300w\" sizes=\"(max-width: 361px) 100vw, 361px\" \/><\/a>\n<\/div>\n<div class=\"details\">\n<div><a href=\"#con6\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_stre.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5361\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_stre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_stre-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con6\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_start.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5360\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_start.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_start-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con6\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_end.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5359\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_end.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_end-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con6\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_center.png\" alt=\"\" width=\"200\" height=\"148\" class=\"alignnone size-full wp-image-5365\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_center.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_center-150x111.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con6\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_between.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5364\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_between.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_between-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con6\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_around.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5363\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_around.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_around-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"con pageContents\">\n<p class=\"title\" id=\"step2-2\">\u5b50\u8981\u7d20\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7<\/p>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con7\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_tl.png\" alt=\"\" width=\"177\" height=\"36\" class=\"alignnone size-full wp-image-5376\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_tl.png 177w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_tl-150x31.png 150w\" sizes=\"(max-width: 177px) 100vw, 177px\" \/><\/a>\n<\/div>\n<div class=\"details\">\n<div><a href=\"#con7\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img.png\" alt=\"\" width=\"836\" height=\"97\" class=\"alignnone size-full wp-image-5377\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img.png 836w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img-150x17.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img-300x35.png 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img-768x89.png 768w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/><\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con8\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_tl.png\" alt=\"\" width=\"286\" height=\"36\" class=\"alignnone size-full wp-image-5380\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_tl.png 286w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_tl-150x19.png 150w\" sizes=\"(max-width: 286px) 100vw, 286px\" \/><\/a>\n<\/div>\n<div class=\"details\">\n<div><a href=\"#con8\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img.png\" alt=\"\" width=\"836\" height=\"97\" class=\"alignnone size-full wp-image-5379\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img.png 836w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img-150x17.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img-300x35.png 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img-768x89.png 768w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/><\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con9\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_tl.png\" alt=\"\" width=\"276\" height=\"36\" class=\"alignnone size-full wp-image-5382\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_tl.png 276w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_tl-150x20.png 150w\" sizes=\"(max-width: 276px) 100vw, 276px\" \/><\/a>\n<\/div>\n<div class=\"details\">\n<div><a href=\"#con9\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img.png\" alt=\"\" width=\"836\" height=\"97\" class=\"alignnone size-full wp-image-5381\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img.png 836w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img-150x17.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img-300x35.png 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img-768x89.png 768w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/><\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con10\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_basis_tl.png\" alt=\"\" width=\"372\" height=\"36\" class=\"alignnone size-full wp-image-5385\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_basis_tl.png 372w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_basis_tl-150x15.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_basis_tl-300x29.png 300w\" sizes=\"(max-width: 372px) 100vw, 372px\" \/><\/a>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con11\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_tl.png\" alt=\"\" width=\"483\" height=\"36\" class=\"alignnone size-full wp-image-5386\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_tl.png 483w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_tl-150x11.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_tl-300x22.png 300w\" sizes=\"(max-width: 483px) 100vw, 483px\" \/><\/a>\n<\/div>\n<\/div>\n<div class=\"box\">\n<div class=\"tl\">\n<a href=\"#con12\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_tl.png\" alt=\"\" width=\"325\" height=\"36\" class=\"alignnone size-full wp-image-5613\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_tl.png 325w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_tl-150x17.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_tl-300x33.png 300w\" sizes=\"(max-width: 325px) 100vw, 325px\" \/><\/a>\n<\/div>\n<div class=\"details\">\n<div><a href=\"#con12\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_auto.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5622\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_auto.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_auto-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con12\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_start.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5620\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_start.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_start-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con12\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_end.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5619\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_end.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_end-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con12\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_center.png\" alt=\"\" width=\"200\" height=\"148\" class=\"alignnone size-full wp-image-5618\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_center.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_center-150x111.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con12\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_baseline.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5617\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_baseline.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_baseline-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<div><a href=\"#con12\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_stre.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5621\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_stre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_stre-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h1 id=\"con1\">\u4e26\u3076\u5411\u304d\uff1aflex-direction<\/h1>\n<div class=\"flex\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_row.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5288\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_row.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_row-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_rowre.png\" alt=\"\" width=\"200\" height=\"147\" class=\"alignnone size-full wp-image-5289\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_rowre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_rowre-150x110.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_colre.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5292\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_colre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_colre-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_col.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5291\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_col.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_direction_col-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/>\n<\/div>\n<p>flex-direction\u306f\u3001\u5b50\u8981\u7d20\u3092\u3069\u306e\u65b9\u5411\u306b\u914d\u7f6e\u3059\u308b\u304b\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n     flex-direction: row;\r\n}<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fbrow\uff08\u521d\u671f\u5024\uff09 \uff1a \u5b50\u8981\u7d20\u3092\u5de6\u304b\u3089\u53f3\u3078\u3068\u914d\u7f6e<br \/>\n\u30fbrow-reverse \uff1a \u5b50\u8981\u7d20\u3092\u53f3\u304b\u3089\u5de6\u3078\u3068\u914d\u7f6e<br \/>\n\u30fbcolumn \uff1a \u5b50\u8981\u7d20\u3092\u4e0a\u304b\u3089\u4e0b\u3078\u3068\u914d\u7f6e<br \/>\n\u30fbcolmn-reverse \uff1a \u5b50\u8981\u7d20\u3092\u4e0b\u304b\u3089\u4e0a\u3078\u3068\u914d\u7f6e\n<\/div>\n<h1 id=\"con2\">\u6298\u308a\u8fd4\u3057\u65b9\uff1aflex-wrap<\/h1>\n<div class=\"flex\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_no.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5335\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_no.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_no-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrap.png\" alt=\"\" width=\"200\" height=\"146\" class=\"alignnone size-full wp-image-5337\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrap.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrap-150x110.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrapre.png\" alt=\"\" width=\"200\" height=\"146\" class=\"alignnone size-full wp-image-5336\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrapre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_wrap_wrapre-150x110.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/>\n<\/div>\n<p>flex-wrap\u306f\u3001\u5b50\u8981\u7d20\u306e\u6298\u308a\u8fd4\u3057\u65b9\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n     flex-wrap: nowrap;\r\n}<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fbnowrap\uff08\u521d\u671f\u5024\uff09 \uff1a \u6298\u308a\u8fd4\u3055\u305a\u4e00\u884c\u306b\u4e26\u3079\u308b<br \/>\n\u30fbwrap \uff1a \u4e0a\u304b\u3089\u4e0b\u306b\u6298\u308a\u8fd4\u3059<br \/>\n\u30fbwrap-reverse \uff1a \u4e0b\u304b\u3089\u4e0a\u306b\u6298\u308a\u8fd4\u3059\n<\/div>\n<h1 id=\"con3\">\u4e26\u3076\u5411\u304d\u3068\u6298\u308a\u8fd4\u3057\u65b9\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a\uff1aflex-flow<\/h1>\n<p>flex-flow\u306f\u3001flex-direction\u3068flex-wrap\u3092\u4e00\u62ec\u3067\u6307\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n     flex-flow: row nowrap;\u3000\r\n}<\/pre>\n<h1 id=\"con4\">\u6c34\u5e73\u65b9\u5411\u306e\u914d\u7f6e\uff1ajustify-content<\/h1>\n<div class=\"flex\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_start.png\" alt=\"\" width=\"200\" height=\"85\" class=\"alignnone size-full wp-image-5341\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_start.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_start-150x64.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_end.png\" alt=\"\" width=\"200\" height=\"83\" class=\"alignnone size-full wp-image-5340\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_end.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_end-150x62.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_center.png\" alt=\"\" width=\"200\" height=\"81\" class=\"alignnone size-full wp-image-5345\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_center.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_center-150x61.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_between.png\" alt=\"\" width=\"200\" height=\"82\" class=\"alignnone size-full wp-image-5344\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_between.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_between-150x62.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_around.png\" alt=\"\" width=\"200\" height=\"82\" class=\"alignnone size-full wp-image-5343\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_around.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/justify_con_around-150x62.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/>\n<\/div>\n<p>justify-content\u306f\u3001\u5b50\u8981\u7d20\u306e\u6c34\u5e73\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n     justify-content: flex-start;\r\n}<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fbflex-start\uff08\u521d\u671f\u5024\uff09 \uff1a \u5de6\u63c3\u3048<br \/>\n\u30fbflex-end \uff1a \u53f3\u63c3\u3048<br \/>\n\u30fbcenter \uff1a \u4e2d\u592e\u63c3\u3048<br \/>\n\u30fbspace-between \uff1a \u4e21\u7aef\u63c3\u3048\uff08\u4e21\u7aef\u306e\u4f59\u767d\u306a\u3057\uff09<br \/>\n\u30fbspace-around \uff1a \u4e21\u7aef\u63c3\u3048\uff08\u4e21\u7aef\u306e\u4f59\u767d\u3042\u308a\uff09\n<\/div>\n<h1 id=\"con5\">\u5782\u76f4\u65b9\u5411\u306e\u914d\u7f6e\uff1aalign-items<\/h1>\n<div class=\"flex\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_stre.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5349\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_stre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_stre-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_start.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5348\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_start.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_start-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_end.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5353\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_end.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_end-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_center.png\" alt=\"\" width=\"200\" height=\"148\" class=\"alignnone size-full wp-image-5352\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_center.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_center-150x111.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_items_baseline.png\" alt=\"\" width=\"200\" height=\"148\" class=\"alignnone size-full wp-image-5352\"\/>\n<\/div>\n<p>align-items\u306f\u3001\u5b50\u8981\u7d20\u306e\u5782\u76f4\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n     align-items: stretch;\r\n}<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fbstretch\uff08\u521d\u671f\u5024\uff09 \uff1a \u89aa\u8981\u7d20\u306e\u9ad8\u3055\u3044\u3063\u3071\u3044\u306b\u5e83\u304c\u308b<br \/>\n\u30fbflex-start \uff1a \u4e0a\u63c3\u3048<br \/>\n\u30fbflex-end \uff1a \u4e0b\u63c3\u3048<br \/>\n\u30fbcenter  \uff1a \u4e2d\u592e\u63c3\u3048<br \/>\n\u30fbbaseline \uff1a \u30a2\u30a4\u30c6\u30e0\u306e\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u306b\u63c3\u3048\u308b\n<\/div>\n<h1 id=\"con6\">\u8907\u6570\u884c\u306e\u5782\u76f4\u65b9\u5411\u306e\u914d\u7f6e\uff1aalign-content<\/h1>\n<div class=\"flex\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_stre.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5361\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_stre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_stre-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_start.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5360\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_start.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_start-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_end.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5359\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_end.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_end-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_center.png\" alt=\"\" width=\"200\" height=\"148\" class=\"alignnone size-full wp-image-5365\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_center.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_center-150x111.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_between.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5364\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_between.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_between-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_around.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5363\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_around.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/align_con_around-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/>\n<\/div>\n<p>align-content\u306f\u3001\u5b50\u8981\u7d20\u304c\u8907\u6570\u884c\u306b\u306a\u3063\u305f\u6642\u306e\u5782\u76f4\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<br \/>\n\u300cflex-wrap: nowrap;\u300d\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u3001align-content\u306f\u7121\u52b9\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n     align-content: stretch;\r\n}<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fbstretch\uff08\u521d\u671f\u5024\uff09 \uff1a \u89aa\u8981\u7d20\u306e\u9ad8\u3055\u3044\u3063\u3071\u3044\u306b\u5e83\u304c\u308b<br \/>\n\u30fbflex-start \uff1a \u4e0a\u63c3\u3048<br \/>\n\u30fbflex-end \uff1a \u4e0b\u63c3\u3048<br \/>\n\u30fbcenter  \uff1a \u4e2d\u592e\u63c3\u3048<br \/>\n\u30fbspace-between \uff1a \u4e0a\u4e0b\u63c3\u3048\uff08\u4e0a\u4e0b\u306e\u4f59\u767d\u306a\u3057\uff09<br \/>\n\u30fbspace-around \uff1a \u4e0a\u4e0b\u63c3\u3048\uff08\u4e0a\u4e0b\u306e\u4f59\u767d\u3042\u308a\uff09\n<\/div>\n<h1 id=\"con7\">\u9806\u5e8f\u306e\u6307\u5b9a\uff1aorder<\/h1>\n<div class=\"flex\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img.png\" alt=\"\" width=\"836\" height=\"97\" class=\"alignnone size-full wp-image-5377\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img.png 836w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img-150x17.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img-300x35.png 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/order_img-768x89.png 768w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/>\n<\/div>\n<p>order\u306f\u3001\u5b50\u8981\u7d20\u306e\u4e26\u3073\u9806\u3092\u4efb\u610f\u3067\u6307\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<br \/>\n\u8a18\u8ff0\u9806\u306b\u4fc2\u308f\u3089\u305a\u9806\u5e8f\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n}\r\n.item{\r\n     order: 1;\r\n}\r\n<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fb0\uff08\u521d\u671f\u5024\uff09 \uff1a \u30de\u30a4\u30ca\u30b9\u5024\u304b\u3089\u6307\u5b9a\u304c\u53ef\u80fd\n<\/div>\n<h1 id=\"con8\">\u5b50\u8981\u7d20\u306e\u4f38\u3073\u308b\u6bd4\u7387\uff1aflex-grow<\/h1>\n<div class=\"flex\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img.png\" alt=\"\" width=\"836\" height=\"97\" class=\"alignnone size-full wp-image-5379\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img.png 836w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img-150x17.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img-300x35.png 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_grow_img-768x89.png 768w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/>\n<\/div>\n<p>flex-grow\u306f\u3001\u89aa\u8981\u7d20\u306b\u4f59\u3063\u305f\u30b9\u30da\u30fc\u30b9\u304c\u3042\u308b\u5834\u5408\u3001\u5b50\u8981\u7d20\u306e\u4f38\u3073\u7387\u3092\u6307\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n}\r\n.item{\r\n     flex-grow: 2;\r\n}\r\n<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fb0\uff08\u521d\u671f\u5024\uff09 \uff1a \u6570\u5024\u306e\u307f\u6307\u5b9a\u53ef\u80fd\u3002\uff08\u30de\u30a4\u30ca\u30b9\u5024\u306f\u4e0d\u53ef\uff09\n<\/div>\n<h1 id=\"con9\">\u5b50\u8981\u7d20\u306e\u7e2e\u3080\u6bd4\u7387\uff1aflex-shrink<\/h1>\n<div class=\"flex\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img.png\" alt=\"\" width=\"836\" height=\"97\" class=\"alignnone size-full wp-image-5381\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img.png 836w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img-150x17.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img-300x35.png 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/02\/flex_shrink_img-768x89.png 768w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/>\n<\/div>\n<p>flex-shrink\u306f\u3001\u89aa\u8981\u7d20\u306b\u4f59\u3063\u305f\u30b9\u30da\u30fc\u30b9\u306b\u304c\u306a\u304f\u5b50\u8981\u7d20\u304c\u5165\u308a\u304d\u3089\u306a\u3044\u5834\u5408\u3001\u5b50\u8981\u7d20\u306e\u7e2e\u307f\u7387\u3092\u6307\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n}\r\n.item{\r\n     flex-shrink: 2;\r\n}\r\n<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fb1\uff08\u521d\u671f\u5024\uff09 \uff1a \u6570\u5024\u306e\u307f\u6307\u5b9a\u53ef\u80fd\u3002\uff08\u30de\u30a4\u30ca\u30b9\u5024\u306f\u4e0d\u53ef\uff09\n<\/div>\n<h1 id=\"con10\">\u5b50\u8981\u7d20\u306e\u30d9\u30fc\u30b9\u3068\u306a\u308b\u5e45\u306e\u6307\u5b9a\uff1aflex-basis<\/h1>\n<p>flex-basis\u306f\u3001\u5b50\u8981\u7d20\u306e\u5e45\u3092\u6307\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<br \/>\nwidth\u3068\u540c\u3058\u3088\u3046\u306b\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n}\r\n.item{\r\n     flex-basis: 100px;\r\n}\r\n<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fbauto\uff08\u521d\u671f\u5024\uff09 \uff1a px\u3084%\u3067\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\n<\/div>\n<h1 id=\"con11\">flex-grow\u3001flex-shrink\u3001flex-basis\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a\uff1aflex<\/h1>\n<p>flex\u306f\u3001flex-grow\u3001flex-shrink\u3001flex-basis\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n}\r\n.item{\r\n     flex: 0 1 auto;\r\n}\r\n<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fb0 1 auto\uff08\u521d\u671f\u5024\uff09\n<\/div>\n<h1 id=\"con12\">\u5b50\u8981\u7d20\u306e\u5782\u76f4\u65b9\u5411\u306e\u63c3\u3048\uff1aalign-self<\/h1>\n<div class=\"flex\">\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_auto.png\" alt=\"\" width=\"200\" height=\"152\" class=\"alignnone size-full wp-image-5622\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_auto.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_auto-150x114.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_start.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5620\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_start.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_start-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_end.png\" alt=\"\" width=\"200\" height=\"150\" class=\"alignnone size-full wp-image-5619\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_end.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_end-150x113.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_center.png\" alt=\"\" width=\"200\" height=\"148\" class=\"alignnone size-full wp-image-5618\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_center.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_center-150x111.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_baseline.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5617\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_baseline.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_baseline-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_stre.png\" alt=\"\" width=\"200\" height=\"149\" class=\"alignnone size-full wp-image-5621\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_stre.png 200w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/04\/align_self_stre-150x112.png 150w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/>\n<\/div>\n<p>align-self\u306f\u3001\u5b50\u8981\u7d20\u306e\u5782\u76f4\u65b9\u5411\u306e\u63c3\u3048\u3092\u6307\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<br \/>\n\u89aa\u8981\u7d20\u306b\u4f59\u767d\u304c\u3042\u308b\u5834\u5408\u306e\u307f\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<br \/>\nalign-items\u3068\u540c\u3058\u6a5f\u80fd\u3067\u3059\u304c\u3001align-self\u306e\u307b\u3046\u304c\u512a\u5148\u3055\u308c\u307e\u3059\u3002<\/p>\n<h3>\u4f7f\u3044\u65b9<\/h3>\n<pre class=\"brush: python\r; notranslate\">.container{\r\n     display: flex;\r\n}\r\n.item{\r\n     align-self: auto;\r\n}\r\n<\/pre>\n<h3>\u5024\u306e\u7a2e\u985e<\/h3>\n<div class=\"con2 pageContents\">\n\u30fbauto\uff08\u521d\u671f\u5024\uff09 \uff1a \u89aa\u8981\u7d20\u306ealign-items\u306e\u5024\u3092\u7d99\u627f\uff08\u89aa\u8981\u7d20\u3092\u6301\u305f\u306a\u3044\u5834\u5408\u306fstretch \u3068\u306a\u308b\uff09<br \/>\n\u30fbflex-start \uff1a \u4e0a\u63c3\u3048<br \/>\n\u30fbflex-end \uff1a \u4e0b\u63c3\u3048<br \/>\n\u30fbcenter  \uff1a \u4e2d\u592e\u63c3\u3048<br \/>\n\u30fbbaseline \uff1a \u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u306b\u63c3\u3048\u308b<br \/>\n\u30fbstretch \uff1a \u89aa\u8981\u7d20\u306e\u9ad8\u3055\u3044\u3063\u3071\u3044\u306b\u5e83\u3052\u3066\u914d\u7f6e\n<\/div>\n<hr>\n<p>\u4ee5\u4e0a\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u6bce\u56de\u3067\u3059\u304c\u3001\u307e\u3068\u3081\u3066\u308b\u5074\u3082\u3044\u308d\u3044\u308d\u52c9\u5f37\u306b\u306a\u308a\u307e\u3059\u306d\u3002<br \/>\n\u95b2\u89a7\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3002Web\u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u5c71\u672c\u3067\u3059\u3002 \u4eca\u66f4\u3067\u3059\u304cCSS flexbox\u306e\u7a2e\u985e\u3084\u8a73\u7d30\u3001\u4f7f\u3044\u65b9\u306e\u4f8b\u306a\u3069\u3092\u4fdd\u5b58\u7248\u3068\u3057\u3066\u307e\u3068\u3081\u305f\u306e\u3067\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u3082\u304f\u3058 CSS Flexbox\u3068\u306f\uff1f \u5404\u8aac\u660e \u89aa\u8981\u7d20\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7 \u4e26\u3076\u5411 [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":5629,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[83,103],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/posts\/5267"}],"collection":[{"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/comments?post=5267"}],"version-history":[{"count":163,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/posts\/5267\/revisions"}],"predecessor-version":[{"id":6050,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/posts\/5267\/revisions\/6050"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/media\/5629"}],"wp:attachment":[{"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/media?parent=5267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/categories?post=5267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/tags?post=5267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}