{"id":4947,"date":"2026-01-19T19:18:16","date_gmt":"2026-01-19T10:18:16","guid":{"rendered":"https:\/\/dennie.tokyo\/it\/?p=4947"},"modified":"2026-01-20T18:51:52","modified_gmt":"2026-01-20T09:51:52","slug":"%e3%80%90css%e3%80%91flex-%e3%82%b3%e3%83%b3%e3%83%86%e3%83%8a","status":"publish","type":"post","link":"https:\/\/dennie.tokyo\/it\/?p=4947","title":{"rendered":"\u3010CSS\u3011Flex \u30b3\u30f3\u30c6\u30ca &#8211; \u8981\u7d20\u306e\u4e26\u3073\u65b9"},"content":{"rendered":"\n<p>Flex\u30b3\u30f3\u30c6\u30ca\u3067\u6307\u5b9a\u3059\u308b\u8981\u7d20(Flex\u30a2\u30a4\u30c6\u30e0)\u306e\u4e26\u3073\u65b9\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u8981\u7d20\u3092\u6a2a\u4e26\u3073\u3055\u305b\u305f\u3044\u5834\u5408\u3001Flex\u30b3\u30f3\u30c6\u30ca\u3092\u4f7f\u7528\u3059\u308b\u3060\u3051\u3067\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u8981\u7d20(Flex\u30a2\u30a4\u30c6\u30e0)\u306e\u4e26\u3076\u65b9\u5411 &#8211; flex-direction\u30d7\u30ed\u30d1\u30c6\u30a3<\/h1>\n\n\n\n<p>flex-direction\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066\u3001\u8981\u7d20(Flex\u30a2\u30a4\u30c6\u30e0)\u306e\u4e26\u3073\u65b9\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u8981\u7d20\u306e\u4e26\u3076\u65b9\u5411\u306f\u5de6\u6a2a\u4e26\u3073\u3060\u3051\u3067\u306a\u304f\u53f3\u6a2a\u4e26\u3073\u3001\u7e26\u4e26\u3073\u3082\u6307\u5b9a\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>row<\/td><td>\u8981\u7d20\u3092\u5de6\u4e26\u3073\u306b\u3057\u307e\u3059\u3002flex-direction\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6307\u5b9a\u3057\u306a\u3044\u5834\u5408\u306f\u3001row\u3068\u540c\u3058\u6319\u52d5\u306b\u306a\u308a\u307e\u3059\u3002<\/td><\/tr><tr><td>row-reverse<\/td><td>\u8981\u7d20\u3092\u53f3\u4e26\u3073\u306b\u3057\u307e\u3059\u3002<\/td><\/tr><tr><td>column<\/td><td>\u8981\u7d20\u3092\u4e0a\u304b\u3089\u7e26\u4e26\u3073\u306b\u3057\u307e\u3059\u3002<\/td><\/tr><tr><td>column-reverse<\/td><td>\u8981\u7d20\u3092\u4e0b\u304b\u3089\u7e26\u4e26\u3073\u306b\u3057\u307e\u3059\u3002<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">flex-direction\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3067\u304d\u308b\u5024<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u5de6\u6a2a\u4e26\u3073<\/h2>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- \u5de6\u4e26\u3073 --&gt;\n&lt;div class=&quot;flex-container left&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  width: 100%;\n  outline: solid red;\n}\n\n\/* \u5de6\u4e26\u3073 *\/\n.left {\n  flex-direction: row;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-left-direction-test01 {\n  display: flex;\n  width: 100%;\n  outline: solid red;\n}\n\n\/* \u5de6\u4e26\u3073 *\/\n.left-direction-test01 {\n  flex-direction: row;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-left-direction-test01 {\n  outline: solid;\n  background-color: aquamarine;\n}\n<\/style>\n<div class=\"flex-container-left-direction-test01 left-direction-test01\">\n  <div class=\"flex-item-left-direction-test01\">flex item 1<\/div>\n  <div class=\"flex-item-left-direction-test01\">flex item 2<\/div>\n  <div class=\"flex-item-left-direction-test01\">flex item 3<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u53f3\u6a2a\u4e26\u3073<\/h2>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- \u53f3\u4e26\u3073 --&gt;\n&lt;div class=&quot;flex-container right&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  width: 100%;\n  outline: solid red;\n}\n\n\/* \u53f3\u4e26\u3073 *\/\n.right {\n  flex-direction: row-reverse;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-right-direction-test01 {\n  display: flex;\n  width: 100%;\n  outline: solid red;\n}\n\n\/* \u53f3\u4e26\u3073 *\/\n.right-direction-test01 {\n  flex-direction: row-reverse;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-right-direction-test01 {\n  outline: solid;\n  background-color: aquamarine;\n}\n<\/style>\n\n<div class=\"flex-container-right-direction-test01 right-direction-test01\">\n  <div class=\"flex-item-right-direction-test01\">flex item 1<\/div>\n  <div class=\"flex-item-right-direction-test01\">flex item 2<\/div>\n  <div class=\"flex-item-right-direction-test01\">flex item 3<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u7e26\u4e26\u3073\u4e0a\u304b\u3089<\/h2>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- \u7e26\u4e26\u3073\u4e0a\u304b\u3089 --&gt;\n&lt;div class=&quot;flex-container vertical-top&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  width: 100%;\n  outline: solid red;\n}\n\n\/* \u7e26\u4e26\u3073\u4e0a\u304b\u3089 *\/\n.vertical-top {\n  flex-direction: column;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-vertical-top-direction-test01 {\n  display: flex;\n  width: 100%;\n  outline: solid red;\n}\n\n\/* \u7e26\u4e26\u3073\u4e0a\u304b\u3089 *\/\n.vertical-top-direction-test01 {\n  flex-direction: column;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-vertical-top-direction-test01 {\n  outline: solid;\n  background-color: aquamarine;\n}\n<\/style>\n\n<div class=\"flex-container-vertical-top-direction-test01 vertical-top-direction-test01\">\n  <div class=\"flex-item-vertical-top-direction-test01\">flex item 1<\/div>\n  <div class=\"flex-item-vertical-top-direction-test01\">flex item 2<\/div>\n  <div class=\"flex-item-vertical-top-direction-test01\">flex item 3<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u7e26\u4e26\u3073\u4e0b\u304b\u3089<\/h2>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- \u7e26\u4e26\u3073\u4e0b\u304b\u3089 --&gt;\n&lt;div class=&quot;flex-container vertical-bottom&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  width: 100%;\n  outline: solid red;\n}\n\n\/* \u7e26\u4e26\u3073\u4e0b\u304b\u3089 *\/\n.vertical-bottom {\n  flex-direction: column-reverse;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-vertical-bottom-direction-test01 {\n  display: flex;\n  width: 100%;\n  outline: solid red;\n}\n\n\/* \u7e26\u4e26\u3073\u4e0b\u304b\u3089 *\/\n.vertical-bottom-direction-test01 {\n  flex-direction: column-reverse;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-vertical-bottom-direction-test01 {\n  outline: solid;\n  background-color: aquamarine;\n}\n<\/style>\n<div class=\"flex-container-vertical-bottom-direction-test01 vertical-bottom-direction-test01\">\n  <div class=\"flex-item-vertical-bottom-direction-test01\">flex item 1<\/div>\n  <div class=\"flex-item-vertical-bottom-direction-test01\">flex item 2<\/div>\n  <div class=\"flex-item-vertical-bottom-direction-test01\">flex item 3<\/div>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading\">\u8981\u7d20(Flex\u30a2\u30a4\u30c6\u30e0)\u306e\u6298\u308a\u8fd4\u3057 &#8211; flex-wrap\u30d7\u30ed\u30d1\u30c6\u30a3<\/h1>\n\n\n\n<p>Flex\u30a2\u30a4\u30c6\u30e0\u304cFlex\u30b3\u30f3\u30c6\u30ca\u306e\u5e45\u307e\u305f\u306f\u9ad8\u3055\u3092\u8d85\u3048\u5834\u5408\u3001\u8d85\u3048\u305f\u5206\u306eFlex\u30a2\u30a4\u30c6\u30e0\u3092\u3069\u3046\u4e26\u3079\u308b\u304b\u3092\u6307\u5b9a\u51fa\u6765\u307e\u3059\u3002\u3053\u308c\u306b\u306f <strong>flex-wrap\u30d7\u30ed\u30d1\u30c6\u30a3<\/strong> \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>nowrap<\/td><td>\u306f\u307f\u51fa\u3057\u305f\u8981\u7d20\u3092\u6298\u308a\u8fd4\u3057\u307e\u305b\u3093\u3002\u305d\u306e\u307e\u307e\u8868\u793a\u3057\u307e\u3059\u3002<br>flex-wrap\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6307\u5b9a\u3057\u306a\u3044\u5834\u5408\u306f\u3001nowrap\u3068\u540c\u3058\u6319\u52d5\u306b\u306a\u308a\u307e\u3059\u3002<\/td><\/tr><tr><td>wrap<\/td><td>\u306f\u307f\u51fa\u3057\u305f\u8981\u7d20\u3092\u6298\u308a\u8fd4\u3057\u307e\u3059\u3002<br>\u6a2a\u4e26\u3073\u306e\u5834\u5408\u3001\u306f\u307f\u51fa\u3057\u305f\u8981\u7d20\u306f\u4e0b\u306b\u56de\u308a\u8fbc\u307f\u307e\u3059\u3002<br>\u7e26\u4e26\u3073\u306e\u5834\u5408\u3001\u306f\u307f\u51fa\u3057\u305f\u8981\u7d20\u306f\u53f3\u306b\u56de\u308a\u8fbc\u307f\u307e\u3059\u3002<\/td><\/tr><tr><td>wrap-reverse<\/td><td>\u306f\u307f\u51fa\u3057\u305f\u8981\u7d20\u3092\u6298\u308a\u8fd4\u3057\u307e\u3059\u3002<br>\u6a2a\u4e26\u3073\u306e\u5834\u5408\u3001\u306f\u307f\u51fa\u3057\u305f\u8981\u7d20\u306f\u4e0a\u306b\u56de\u308a\u8fbc\u307f\u307e\u3059\u3002<br>\u7e26\u4e26\u3073\u306e\u5834\u5408\u3001\u306f\u307f\u51fa\u3057\u305f\u8981\u7d20\u306f\u5de6\u306b\u56de\u308a\u8fbc\u307f\u307e\u3059\u3002<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">flex-wrap\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3067\u304d\u308b\u5024<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u6a2a\u4e26\u3073<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u6298\u308a\u8fd4\u3057\u306a\u3057<\/h3>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- nowrap --&gt;\n&lt;div class=&quot;flex-container nowrap&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  width: 110px;\n  outline: solid red;\n}\n\n\/* nowrap *\/\n.nowrap {\n  flex-wrap: nowrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  width: 50px;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-nowrap-wrap-test01 {\n  display: flex;\n  width: 110px;\n  outline: solid red;\n}\n\n\/* nowrap *\/\n.nowrap-wrap-test01 {\n  flex-wrap: nowrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-nowrap-wrap-test01 {\n  outline: solid;\n  width: 50px;\n  background-color: aquamarine;\n}\n<\/style>\n<div class=\"flex-container-nowrap-wrap-test01 nowrap-wrap-test01\">\n  <div class=\"flex-item-nowrap-wrap-test01\">flex item 1<\/div>\n  <div class=\"flex-item-nowrap-wrap-test01\">flex item 2<\/div>\n  <div class=\"flex-item-nowrap-wrap-test01\">flex item 3<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u6298\u308a\u8fd4\u3057\u8981\u7d20\u4e0b<\/h3>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- wrap --&gt;\n&lt;div class=&quot;flex-container wrap&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  width: 110px;\n  outline: solid red;\n}\n\n\/* wrap *\/\n.wrap {\n  flex-wrap: wrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  width: 50px;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-wrap-wrap-test01 {\n  display: flex;\n  width: 110px;\n  outline: solid red;\n}\n\n\/* wrap *\/\n.wrap-wrap-test01 {\n  flex-wrap: wrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-wrap-wrap-test01 {\n  outline: solid;\n  width: 50px;\n  background-color: aquamarine;\n}\n<\/style>\n<div class=\"flex-container-wrap-wrap-test01 wrap-wrap-test01\">\n  <div class=\"flex-item-wrap-wrap-test01 \">flex item 1<\/div>\n  <div class=\"flex-item-wrap-wrap-test01 \">flex item 2<\/div>\n  <div class=\"flex-item-wrap-wrap-test01 \">flex item 3<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u6298\u308a\u8fd4\u3057\u8981\u7d20\u4e0a<\/h3>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- wrap-reverse --&gt;\n&lt;div class=&quot;flex-container wrap-reverse&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  width: 110px;\n  outline: solid red;\n}\n\n\/* wrap-reverse *\/\n.wrap-reverse {\n  flex-wrap: wrap-reverse;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  width: 50px;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-wrap-reverse-wrap-test01 {\n  display: flex;\n  width: 110px;\n  outline: solid red;\n}\n\n\/* wrap-reverse *\/\n.wrap-reverse-wrap-test01 {\n  flex-wrap: wrap-reverse;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-wrap-reverse-wrap-test01 {\n  outline: solid;\n  width: 50px;\n  background-color: aquamarine;\n}\n<\/style>\n\n<div class=\"flex-container-wrap-reverse-wrap-test01 wrap-reverse-wrap-test01\">\n  <div class=\"flex-item-wrap-reverse-wrap-test01\">flex item 1<\/div>\n  <div class=\"flex-item-wrap-reverse-wrap-test01\">flex item 2<\/div>\n  <div class=\"flex-item-wrap-reverse-wrap-test01\">flex item 3<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u7e26\u4e26\u3073<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u6298\u308a\u8fd4\u3057\u306a\u3057<\/h3>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- \u6298\u308a\u8fd4\u3057\u306a\u3057 --&gt;\n&lt;div class=&quot;flex-container nowrap&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  flex-direction: column;\n  width: 200px;\n  height: 200px;\n  outline: solid red;\n}\n\n\/* \u6298\u308a\u8fd4\u3057\u306a\u3057 *\/\n.nowrap {\n  flex-wrap: nowrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  width: 100px;\n  height: 100px;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-nowrap-wrap-column-test01 {\n  display: flex;\n  flex-direction: column;\n  width: 200px;\n  height: 200px;\n  outline: solid red;\n}\n\n\/* nowrap *\/\n.nowrap-wrap-column-test01 {\n  flex-wrap: nowrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-nowrap-wrap-column-test01 {\n  outline: solid;\n  width: 100px;\n  height: 100px;\n  background-color: aquamarine;\n}\n<\/style>\n<div class=\"flex-container-nowrap-wrap-column-test01 nowrap-wrap-column-test01\">\n  <div class=\"flex-item-nowrap-wrap-column-test01\">flex item 1<\/div>\n  <div class=\"flex-item-nowrap-wrap-column-test01\">flex item 2<\/div>\n  <div class=\"flex-item-nowrap-wrap-column-test01\">flex item 3<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u6298\u308a\u8fd4\u3057\u8981\u7d20\u53f3<\/h3>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- \u6298\u308a\u8fd4\u3057\u8981\u7d20\u53f3 --&gt;\n&lt;div class=&quot;flex-container wrap&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  flex-direction: column;\n  width: 200px;\n  height: 200px;\n  outline: solid red;\n}\n\n\/* wrap *\/\n.wrap {\n  flex-wrap: wrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  width: 100px;\n  height: 100px;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-wrap-wrap-column-test01 {\n  display: flex;\n  flex-direction: column;\n  width: 200px;\n  height: 200px;\n  outline: solid red;\n}\n\n\/* wrap *\/\n.wrap-wrap-column-test01 {\n  flex-wrap: wrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-wrap-wrap-column-test01 {\n  outline: solid;\n  width: 100px;\n  height: 100px;\n  background-color: aquamarine;\n}\n<\/style>\n<div class=\"flex-container-wrap-wrap-column-test01 wrap-wrap-column-test01\">\n  <div class=\"flex-item-wrap-wrap-column-test01\">flex item 1<\/div>\n  <div class=\"flex-item-wrap-wrap-column-test01\">flex item 2<\/div>\n  <div class=\"flex-item-wrap-wrap-column-test01\">flex item 3<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u6298\u308a\u8fd4\u3057\u8981\u7d20\u5de6<\/h3>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!-- wrap-reverse --&gt;\n&lt;div class=&quot;flex-container wrap-reverse&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  flex-direction: column;\n  width: 200px;\n  height: 200px;\n  outline: solid red;\n}\n\n\/* wrap-reverse *\/\n.wrap-reverse {\n  flex-wrap: wrap-reverse;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  width: 100px;\n  height: 100px;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-wrap-reverse-wrap-column-test01 {\n  display: flex;\n  flex-direction: column;\n  width: 200px;\n  height: 200px;\n  outline: solid red;\n}\n\n\/* wrap-reverse *\/\n.wrap-reverse-wrap-column-test01 {\n  flex-wrap: wrap-reverse;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-wrap-reverse-wrap-column-test01 {\n  outline: solid;\n  width: 100px;\n  height: 100px;\n  background-color: aquamarine;\n}\n<\/style>\n<div class=\"flex-container-wrap-reverse-wrap-column-test01 wrap-reverse-wrap-column-test01\">\n  <div class=\"flex-item-wrap-reverse-wrap-column-test01 \">flex item 1<\/div>\n  <div class=\"flex-item-wrap-reverse-wrap-column-test01 \">flex item 2<\/div>\n  <div class=\"flex-item-wrap-reverse-wrap-column-test01 \">flex item 3<\/div>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading\">flex-flow<\/h1>\n\n\n\n<p>flex-flow \u306f flex-direction \u3068 flex-wrap \u3092\u540c\u6642\u306b\u6307\u5b9a\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=&quot;flex-container flow&quot;&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 1&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 2&lt;\/div&gt;\n  &lt;div class=&quot;flex-item&quot;&gt;flex item 3&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container {\n  display: flex;\n  flex-direction: column;\n  width: 120px;\n  outline: solid red;\n}\n\n\/* flex-flow *\/\n.flow {\n  flex-flow: row-reverse wrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item {\n  outline: solid;\n  width: 50px;\n  background-color: aquamarine;\n}<\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7d50\u679c<\/strong><\/p>\n\n\n\n<style>\n\/* Flex\u30b3\u30f3\u30c6\u30ca *\/\n.flex-container-flow-test01 {\n  display: flex;\n  flex-direction: column;\n  width: 120px;\n  outline: solid red;\n}\n\n\/* flow *\/\n.flow-test01 {\n  flex-flow: row-reverse wrap;\n}\n\n\/* Flex\u30a2\u30a4\u30c6\u30e0 *\/\n.flex-item-flow-test01 {\n  outline: solid;\n  width: 50px;\n  background-color: aquamarine;\n}\n<\/style>\n<div class=\"flex-container-flow-test01 flow-test01\">\n  <div class=\"flex-item-flow-test01\">flex item 1<\/div>\n  <div class=\"flex-item-flow-test01\">flex item 2<\/div>\n  <div class=\"flex-item-flow-test01\">flex item 3<\/div>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading\">\u6700\u5f8c\u306b<\/h1>\n\n\n\n<p>\u7279\u306b\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flex\u30b3\u30f3\u30c6\u30ca\u3067\u6307\u5b9a\u3059\u308b\u8981\u7d20(Flex\u30a2\u30a4\u30c6\u30e0)\u306e\u4e26\u3073\u65b9\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":4723,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-4947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4947"}],"version-history":[{"count":40,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4947\/revisions"}],"predecessor-version":[{"id":5028,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4947\/revisions\/5028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/media\/4723"}],"wp:attachment":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}