{"id":906,"date":"2021-06-05T16:23:18","date_gmt":"2021-06-05T07:23:18","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=906"},"modified":"2022-07-18T12:28:40","modified_gmt":"2022-07-18T03:28:40","slug":"tailwindcss%e3%83%81%e3%83%bc%e3%83%88%e3%82%b7%e3%83%bc%e3%83%88%e8%a7%a3%e8%aa%acflexbox","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=906","title":{"rendered":"tailwindcss\u30c1\u30fc\u30c8\u30b7\u30fc\u30c8\u89e3\u8aac(Flexbox)"},"content":{"rendered":"\n

\u80cc\u666f\u8272<\/h2>\n\n\n\n

background-\u8272-RGBA\u306e\u914d\u8272<\/p>\n\n\n\n

tailwindcss \n        .bg-pink-500\n\ncss\n        -tw-bg-opacity: 1;\n        background-color: rgba(236, 72, 153, var(--tw-bg-opacity));<\/code><\/pre><\/div>\n\n\n\n
Flexbox<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
display<\/h3>\n\n\n\n
flex-direction<\/h3>\n\n\n\n
\u5b50\u8981\u7d20\u3092\u3069\u306e\u65b9\u5411\u306b\u914d\u7f6e\u3057\u3066\u3044\u304f\u304b\u3092flex-direction\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002
\u6a2a\u307e\u305f\u306f\u7e26\u306b\u4e26\u3079\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u5024<\/th>\u8aac\u660e<\/th><\/tr><\/thead>
row(\u521d\u671f\u5024)<\/td>\u5b50\u8981\u7d20\u3092\u5de6\u304b\u3089\u53f3\u306b\u914d\u7f6e<\/td><\/tr>
row-reverse<\/td>\u5b50\u8981\u7d20\u3092\u53f3\u304b\u3089\u5de6\u306b\u914d\u7f6e<\/td><\/tr>
column<\/td>\u5b50\u8981\u7d20\u3092\u4e0a\u304b\u3089\u4e0b\u306b\u914d\u7f6e<\/td><\/tr>
column-reverse<\/td>\u5b50\u8981\u7d20\u3092\u4e0b\u304b\u3089\u4e0a\u306b\u914d\u7f6e<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<div class="container">\n    <div class="item">Item 1<\/div>\n    <div class="item">Item 2<\/div>\n    <div class="item">Item 3<\/div>\n    <div class="item">Item 4<\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
.container{\n    display:flex;\n    flex-direction:row-reverse;\n}\n.item{\n    background:#0bd;\n    color:#fff;\n    margin:10px;\n    padding:10px;\n}<\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
flex-wrap<\/h3>\n\n\n\n
\u5b50\u8981\u7d20\u30921\u884c\u3001\u307e\u305f\u306f\u8907\u6570\u884c\u306b\u4e26\u3079\u308b\u304b\u3092flex-wrap\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002\u8907\u6570\u884c\u306b\u3059\u308b\u5834\u5408\u306f\u5b50\u8981\u7d20\u304c\u89aa\u8981\u7d20\u306e\u5e45\u3092\u8d85\u3048\u3066\u3057\u307e\u3063\u305f\u5834\u5408\u3001\u6298\u308a\u8fd4\u3057\u3066\u8907\u6570\u884c\u306b\u914d\u7f6e\u3055\u308c\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u5024<\/th>\u8aac\u660e<\/th><\/tr><\/thead>
nowrap(\u521d\u671f\u5024)<\/td>\u5b50\u8981\u7d20\u3092\u6298\u308a\u8fd4\u3057\u305b\u305a\u30011\u884c\u306b\u4e26\u3079\u308b<\/td><\/tr>
wrap<\/td>\u5b50\u8981\u7d20\u3092\u6298\u308a\u8fd4\u3057\u3001\u8907\u6570\u884c\u306b\u4e0a\u304b\u3089\u4e0b\u3078\u4e26\u3079\u308b<\/td><\/tr>
wrap-reverse<\/td>\u5b50\u8981\u7d20\u3092\u6298\u308a\u8fd4\u3057\u3001\u8907\u6570\u884c\u306b\u4e0b\u304b\u3089\u4e0a\u3078\u4e26\u3079\u308b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
            <div class="container">\n                <div class="item">Item 1<\/div>\n                <div class="item">Item 2<\/div>\n                <div class="item">Item 3<\/div>\n                <div class="item">Item 4<\/div>\n                <div class="item">Item 5<\/div>\n                <div class="item">Item 6<\/div>\n                <div class="item">Item 7<\/div>\n                <div class="item">Item 8<\/div>\n            <\/div><\/code><\/pre><\/div>\n\n\n\n
.container{\n    display:flex;\n    flex-wrap:wrap;\n}\n.item{\n    background:#0bd;\n    color:#fff;\n    margin:10px;\n    padding:10px;\n}<\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
justify-content<\/h3>\n\n\n\n
\u89aa\u8981\u7d20\u306b\u7a7a\u304d\u30b9\u30da\u30fc\u30b9\u304c\u3042\u3063\u305f\u5834\u5408\u3001\u5b50\u8981\u7d20\u3092\u6c34\u5e73\u65b9\u5411\u306e\u3069\u306e\u4f4d\u7f6e\u306b\u914d\u7f6e\u3059\u308b\u304b\u3092justify-content\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u5024<\/th>\u8aac\u660e<\/th><\/tr><\/thead>
flex-start(\u521d\u671f\u5024)<\/td>\u884c\u306e\u958b\u59cb\u4f4d\u7f6e\u304b\u3089\u914d\u7f6e\u3002\u5de6\u63c3\u3048\u3002<\/td><\/tr>
flex-end<\/td>\u884c\u672b\u304b\u3089\u914d\u7f6e\u3002\u53f3\u63c3\u3048\u3002<\/td><\/tr>
center<\/td>\u4e2d\u592e\u63c3\u3048<\/td><\/tr>
space-between<\/td>\u6700\u521d\u3068\u6700\u5f8c\u306e\u5b50\u8981\u7d20\u3092\u4e21\u7aef\u306b\u914d\u7f6e\u3057\u3001\u6b8b\u308a\u306e\u8981\u7d20\u306f\u5747\u7b49\u306b\u9593\u9694\u3092\u7a7a\u3051\u3066\u914d\u7f6e<\/td><\/tr>
space-around<\/td>\u4e21\u7aef\u306e\u5b50\u8981\u7d20\u3082\u542b\u3081\u3001\u5747\u7b49\u306b\u9593\u9694\u3092\u7a7a\u3051\u3066\u914d\u7f6e<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<div class="container">\n    <div class="item">Item 1<\/div>\n    <div class="item">Item 2<\/div>\n    <div class="item">Item 3<\/div>\n    <div class="item">Item 4<\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
.container{\n    display:flex;\n    justify:flex-end;\n}\n.item{\n    background:#0bd;\n    color:#fff;\n    margin:10px;\n    padding:10px\n}<\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
align-items<\/h3>\n\n\n\n
\u89aa\u8981\u7d20\u306b\u7a7a\u304d\u30b9\u30da\u30fc\u30b9\u304c\u3042\u3063\u305f\u5834\u5408\u3001\u5b50\u8981\u7d20\u3092\u5782\u76f4\u65b9\u5411\u306e\u3069\u306e\u4f4d\u7f6e\u306b\u914d\u7f6e\u3059\u308b\u304b\u3092align-items\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u5024<\/th>\u8aac\u660e<\/th><\/tr><\/thead>
stretch(\u521d\u671f\u5024)<\/td>\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\u5e83\u3052\u3066\u914d\u7f6e<\/td><\/tr>
flex-start<\/td>\u89aa\u8981\u7d20\u306e\u958b\u59cb\u4f4d\u7f6e\u304b\u3089\u914d\u7f6e\u3002\u4e0a\u63c3\u3048<\/td><\/tr>
flex-end<\/td>\u89aa\u8981\u7d20\u306e\u7d42\u70b9\u304b\u3089\u914d\u7f6e\u3002\u4e0b\u63c3\u3048<\/td><\/tr>
center<\/td>\u4e2d\u592e\u63c3\u3048<\/td><\/tr>
baseline<\/td>\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u3067\u63c3\u3048\u308b<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<div class="container">\n    <div class="item">Item 1<\/div>\n    <div class="item">Item 2<\/div>\n    <div class="item">Item 3<\/div>\n    <div class="item">Item 4<\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
.container{\n    display:flex;\n    align-items:center;\n    height:100vh;\n}\n.item{\n    background:#0bd;\n    color:#fff;\n    margin:10px;\n    padding:10px\n}<\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
align-content<\/h3>\n\n\n\n
\u5b50\u8981\u7d20\u304c\u8907\u6570\u884c\u306b\u308f\u305f\u3063\u305f\u5834\u5408\u306e\u5782\u76f4\u65b9\u5411\u306e\u63c3\u3048\u3092align-content\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002
\u300cflex-wrap:nowrap;\u300d\u304c\u9069\u7528\u3055\u308c\u3066\u3044\u308b\u3068\u5b50\u8981\u7d20\u304c1\u884c\u306b\u306a\u308b\u306e\u3067align-content\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u7121\u52b9\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u5024<\/th>\u8aac\u660e<\/th><\/tr><\/thead>
stretch(\u521d\u671f\u5024)<\/td>\u89aa\u8981\u7d20\u306e\u9ad8\u3055\u306b\u5408\u308f\u305b\u3066\u5e83\u3052\u3066\u914d\u7f6e<\/td><\/tr>
flex-start<\/td>\u89aa\u8981\u7d20\u306e\u958b\u59cb\u4f4d\u7f6e\u304b\u3089\u914d\u7f6e\u3002\u4e0a\u63c3\u3048<\/td><\/tr>
flex-end<\/td>\u89aa\u8981\u7d20\u306e\u7d42\u70b9\u304b\u3089\u914d\u7f6e\u3002\u4e0b\u63c3\u3048<\/td><\/tr>
center<\/td>\u4e2d\u592e\u63c3\u3048<\/td><\/tr>
space-between<\/td>\u6700\u521d\u3068\u6700\u5f8c\u306e\u5b50\u8981\u7d20\u3092\u4e0a\u4e0b\u306e\u7aef\u306b\u914d\u7f6e\u3057\u3001\u6b8b\u308a\u306e\u8981\u7d20\u306f\u5747\u7b49\u306b\u9593\u9694\u3092\u7a7a\u3051\u3066\u914d\u7f6e<\/td><\/tr>
space-around<\/td>\u4e0a\u4e0b\u7aef\u306b\u3042\u308b\u5b50\u8981\u7d20\u3082\u542b\u3081\u5747\u7b49\u306b\u9593\u9694\u3092\u7a7a\u3051\u3066\u914d\u7f6e<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<div class="container">\n    <div class="item">Item 1<\/div>\n    <div class="item">Item 2<\/div>\n    <div class="item">Item 3<\/div>\n    <div class="item">Item 4<\/div>\n    <div class="item">Item 5<\/div>\n    <div class="item">Item 6<\/div>\n    <div class="item">Item 7<\/div>\n    <div class="item">Item 8<\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
.container{\n    display:flex;\n    flex-wrap:wrap;\n    align-content:space-between;\n    height:300px;\n}\n.item{\n    background:#0bd;\n    color:#fff;\n    margin:10px;\n    padding:10px\n}<\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
flex<\/h3>\n\n\n\n
flex \u306f\u3001flex-grow, flex-shrink, flex-basis\u306e3\u3064\u306e\u5024\u3092\u307e\u3068\u3081\u3066\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/strong>\u3067\u3059\u3002<\/p>\n\n\n\n
\u6307\u5b9a\u3059\u308b\u6570\u5024\u306e\u6570<\/strong><\/td>\u5358\u4f4d\u3042\u308a\/\u306a\u3057<\/strong><\/td>\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u610f\u5473<\/strong><\/td>\u4f8b<\/strong><\/td><\/tr>
1\u3064<\/td>\u5358\u4f4d\u306a\u3057<\/td>flex-grow<\/td>flex: 1;<\/td><\/tr>
1\u3064<\/td>\u5358\u4f4d\u3042\u308a<\/td>flex-basis<\/td>flex: 10em;
flex: 30%;<\/td><\/tr>
2\u3064<\/td>\u5358\u4f4d\u306a\u3057<\/td>
flex-grow\u3001flex-shrink<\/td>		flex: 2 2;<\/td><\/tr>
2\u3064<\/td>\u5358\u4f4d\u3042\u308a
(1\u3064\u76ee\u306e\u5024\u306f\u6574\u6570\u5024)<\/td>		flex-grow\u3001flex-basis<\/td>flex: 1 30px;<\/td><\/tr>
3\u3064<\/td>(1\u3064\u76ee\u3068\uff12\u3064\u76ee\u306e\u5024\u306f\u6574\u6570\u5024)<\/td>flex-grow\u3001flex-shrink\u3001flex-basis<\/td>flex: 2 2 10%;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Flex 1<\/h4>\n\n\n\n
\u300cflex: 1;\u300d\u306f\u3001\u300cflex-grow: 1;\u300d\u3001\u300cflex-shrink: 1;\u300d\u3001\u300cflex-basis: 0;\u300d\u306e3\u3064\u540c\u6642\u306b\u6307\u5b9a\u3057\u305f\u3053\u3068\u3068\u540c\u3058\u610f\u5473\u306b\u306a\u308a\u307e\u3059\u3002
flex-shrink\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306f1<\/strong>\u306e\u305f\u3081\u3001\u305d\u306e\u307e\u307e\u300cflex-shrink: 1;\u300d\u306b\u306a\u308a\u307e\u3059\u3002
flex-basis\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306fauto<\/strong>\u3067\u3059\u304c\u3001\u7701\u7565\u6642\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306f0<\/strong>\u306e\u305f\u3081\u3001\u300cflex-basis: 0;\u300d\u6271\u3044\u306b\u306a\u308a\u307e\u3059\u3002
\u3064\u307e\u308a\u3001\u300cflex: 1;\u300d\u3068\u6307\u5b9a\u3057\u305f\u5834\u5408\u306f\u300cflex-grow: 1;\u300d\u3068\u540c\u3058\u52d5\u4f5c\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
Auto<\/h4>\n\n\n\n
None<\/h4>\n\n\n\n
class<\/th>Properties<\/th><\/tr><\/thead>
flex-1<\/td>flex: 1 1 0%;<\/td><\/tr>
flex-auto<\/td>flex: 1 1 auto;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
flex-grow<\/h3>\n\n\n\n
\u5024\u304c\u5927\u304d\u3044\u307b\u3069\u3001\u5e45\u304c\u5e83\u304f\u306a\u308b\u3002\u30c7\u30d5\u30a9\u30eb\u30c8\u306f0\u3002<\/p>\n\n\n\n
\u5168\u3066\u306e\u5b50\u8981\u7d20\u306b1<\/code>\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u5747\u7b49\u306b\u5e45\u304c\u5e83\u304f\u306a\u308b\u3002<\/p>\n\n\n\n
\n
\n
CSS : grow<\/h2>\n\n\n\n
.parent  {\n    display:   flex;\n}\n\n.children {\n    flex-grow: 1;\n}<\/code><\/pre><\/div>\n<\/div>\n\n\n\n
\n
\u5b9f\u884c\u7d50\u679c<\/h2>\n\n\n<\/div>\n<\/div>\n\n\n\n
\u5b501\uff08.child-1<\/code>\uff09\u306eflex-grow<\/code>\u30922<\/code>\u306b\u5909\u66f4\u3059\u308b\u3002\u5b501\u306e\u5897\u52a0\u5206\u304c\u591a\u3044\u3002<\/p>\n\n\n\n
\n
\n
CSS : grow<\/h2>\n\n\n\n
.parent  {\n    display:   flex;\n}\n\n.children {\n    flex-grow: 1;\n}\n\n.child-1 {\n    flex-grow: 2;\n}<\/code><\/pre><\/div>\n<\/div>\n\n\n\n
\n
\u5b9f\u884c\u7d50\u679c<\/h2>\n\n\n<\/div>\n<\/div>\n\n\n\n
flex-shrink<\/h3>\n\n\n\n
flex-shrink\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306f1<\/strong><\/p>\n\n\n\n
order<\/h3>\n\n\n\n
basis<\/h3>\n\n\n\n
flex-basis\u306f\u3001flex\u30a2\u30a4\u30c6\u30e0\u306e\u57fa\u6e96\u3068\u306a\u308b\u5e45\u3092\u8a2d\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002
flex-basis\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306fauto<\/strong>\u3067\u3059\u304c\u3001\u7701\u7565\u6642\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306f0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
\u80cc\u666f\u8272 background-\u8272-RGBA\u306e\u914d\u8272 Flexbox display flex-direction \u5b50\u8981\u7d20\u3092\u3069\u306e\u65b9\u5411\u306b\u914d\u7f6e\u3057\u3066\u3044\u304f\u304b\u3092flex-direction\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002\u6a2a\u307e\u305f\u306f\u7e26\u306b\u4e26\u3079\u3089\u308c\u307e\u3059\u3002 \u5024 <\/p>\n","protected":false},"author":1,"featured_media":920,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[25],"tags":[],"class_list":["post-906","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tailwindcss"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=906"}],"version-history":[{"count":6,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/906\/revisions"}],"predecessor-version":[{"id":2084,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/906\/revisions\/2084"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}