
ðããããã£ãFlexboxã®ãã°ãŸãšã
Flexboxâã¯ã¬ã€ã¢ãŠããçµãã®ã«éåžžã«äŸ¿å©ã§ããããã°ããšãŠãå€ãããšã§ãæåã§ããææ°ã®ãã©ãŠã¶ã§ã次ã ãšæ°ãããã°ãå ±åãããŠããããããŠã玹ä»ããã®ã¯å€§å€ãªã®ã§ãèªåãããããã£ããã°ããŸãšããŸãã
ãªãããã³ããŒãã¬ãã£ãã¯ã¹ã¯çç¥ããŠããã®ã§æ³šæããŠãã ããã
flex-flow: column wrap;âãã¯ã¿åºã
displayâããããã£ã«âinline-flexâãæå®ããŠããããpositionâããããã£ã«âabsoluteâãæå®ããŠçµ¶å¯Ÿé 眮ããŠããå Žåãflex-flowâããããã£ã«âcolumn wrapâãæå®ãããšâFlexâã³ã³ããããã¯ã¿åºãŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»Chromium Edge
ã»Firefox
ã»Chrome
ã»Safari
ã»Opera
ã»iOS Safari
ã»Android 30 以é
<div class="flex-container">
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
...
</div>
/* ãã° */
.flex-container {
display: inline-flex;
flex-flow: column wrap;
height: 350px;
}
/* è£
食 */
.flex-container {
padding: 2em;
background-color: #f1f0fb ;
}
.flex-item {
margin: 1em;
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãflex-flowâã®å€ã«âcolumnâã¯äœ¿ããâwrapâã ãã«ããŸãããã ããwrapâã ããæå®ããã®ã§ãflex-flowâã·ã§ãŒããã³ãã§ã¯ãªããflex-wrapâããããã£ã䜿ã£ãŠããŸãã
ãŸããwriting-modeâããããã£ãçšããããšã§ãcolumnâãæå®ãããšããšåãããã«çžŠã«äžŠã¶ããã«ããŠããŸãã
.flex-container {
display: inline-flex;
flex-wrap: wrap;
height: 350px;
writing-mode: vertical-lr;
}
.flex-item {
writing-mode: horizontal-tb;
}
Flexâã¢ã€ãã ã§âwriting-modeâããããã£ã«âhorizontal-tbâãæå®ããŠãæåã®åããå ã«æ»ããŠããŸãã
ããã€ãã®èŠçŽ ãâFlexâã³ã³ããã«ãªããªã
summaryâãâfieldsetãbuttonâèŠçŽ ãªã©ãâFlexâã³ã³ããã«å¯Ÿå¿ããŠããŸããã
ãŸãã¯ãfieldsetâèŠçŽ ããã¿ãŠãããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»Edge
ã»Chromium Edge
ã»Firefox 46 æªæº
ã»Chrome
ã»Safari 11 æªæº
ã»Opera
ã»iOS Safari 11 æªæº
ã»Android
<fieldset class="flex-container">
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
</fieldset>
/* ãã° */
.flex-container {
display: flex;
}
/* è£
食 */
.flex-container {
padding: 1em;
border: 0;
background-color: #f1f0fb ;
}
.flex-item {
margin: 1em;
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãfieldsetâèŠçŽ ãâFlexâã³ã³ããã«ãªãã®ãé¿ããããã«ãå éšã«èŠçŽ ãäœã£ãŠâFlexâã³ã³ããã«ããŸãã
<fieldset>
<div class="flex-container">
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
</div>
</fieldset>
次ã«ãsummaryâèŠçŽ ã§ãã
ãã°ãçºçãããã©ãŠã¶
ã»Chrome 55 æªæº
ã»Safari
ã»Opera 42 æªæº
ã»iOS Safari
ã»Android 55 æªæº
summaryâèŠçŽ ãåæ§ã«å éšã«èŠçŽ ãäœããFlexâã³ã³ããã«ããããšã§ãã°ãä¿®æ£ã§ããŸãã
ãŸããbuttonâèŠçŽ ã«ã€ããŠãåæ§ã§ãã
ãã°ãçºçãããã©ãŠã¶
ã»Firefox 52 æªæº
imgâèŠçŽ ã®å€§ããããããã
imgâèŠçŽ ãâFlexâã¢ã€ãã ã«ãããšãFlexâã¢ã€ãã ã®é«ããšå¹ ãç»åãã®ãã®ã®å€§ããã«ãªã£ãŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»Edge
ã»Chromium Edge
ã»Chrome
ã»Safari
ã»Opera
ã»iOS Safari
ã»Android 30 以äž
<div class="flex-container">
<img class="flex-item" src="https://placehold.jp/40/d6d6d6/ffffff/700x200.png">
<img class="flex-item" src="https://placehold.jp/40/d6d6d6/ffffff/700x200.png">
<img class="flex-item" src="https://placehold.jp/40/d6d6d6/ffffff/700x200.png">
</div>
/* ãã° */
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 0 1 45%;
}
/* è£
食 */
.flex-container {
padding: 2em;
background-color: #f1f0fb ;
}
ãã°ãä¿®æ£ããã«ã¯ãflex-basisâããããã£ãšåãå€ãâmax-widthâããããã£ã«æå®ããŸãã
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 0 1 45%;
max-width: 45%;
}
ã¹ã¯ããŒã«ããŒãå šäœã«ãªã
ãã¹ããããâFlexâã³ã³ããå ã§âoverflowâããããã£ã«âautoâãæå®ããŠãã¹ã¯ããŒã«ã§ããããã«ãããšããã®èŠçŽ ã§ã¯ãªãâWebâããŒãžå šäœã«ã¹ã¯ããŒã«ããŒã衚瀺ãããŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»Edge
ã»Chromium Edge
ã»Firefox
ã»Chrome 76 以é
ã»Opera 63 以é
ã»Android 76 以é
åãã¯ãã°ããšæã£ãã®ã§ãããå®éã¯ãã°ã§ã¯ãªã仿§éãã®ããã§ãã
<html>
<body>
<div class="container">
<header class="header">ããããŒ</header>
<main class="main">
<div class="content">
001<br>
002<br>
003<br>
...
</div>
<footer class="footer">ããã¿ãŒ</footer>
</main>
</div>
</body>
</html>
/* ãã° */
html,
body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
}
.content {
flex: 1;
overflow-y: auto;
}
/* è£
食 */
.header,
.footer {
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
.content {
padding: 1em;
}
Flexboxã®ä»æ§ã«ãããšãoverflowâããããã£ã«âvisibleïŒããã©ã«ãå€ïŒãæå®ãããŠãããšãFlexâã¢ã€ãã ã®âmin-heightâããããã£ã®å€ã¯âautoâãšãªããŸãããã以å€ã®å Žåã¯â0âã䜿ãããŸãã
ã€ãŸããFlexâã¢ã€ãã ã§ããâ.contentâèŠçŽ ã®âoverflowâããããã£ã«ã¯âautoâãæå®ãããŠãããããmin-heightâå€ã¯â0âãšãªããŸãã
ããããFlexâã¢ã€ãã ã§ããâ.mainâèŠçŽ ã«ã¯âoverflowâããããã£ãæå®ãããŠããããããã©ã«ãå€ã§ããâvisibleâã䜿ãããŸãããããšãmin-heightâå€ã¯âautoâã§ãªãããã®é«ãã䜿ããããããåèŠçŽ ã®â.contentâèŠçŽ ã¯ã¯ã¿åºããŠããŸãã®ã§ãã
html,
body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.content {
flex: 1;
overflow-y: auto;
}
ãã®æåãä¿®æ£ããã«ã¯ãFlexâã¢ã€ãã ã§âoverflowâããããã£ã®å€ã«âvisibleâãæå®ãããŠããâ.mainâèŠçŽ ã®âmin-heightâããããã£ã«â0âãæå®ããŸãã
åçŽæ¹åã®âmarginâãâpaddingâãç¡èŠããã
Flexâã¢ã€ãã ã§âmarginâãâpaddingâããããã£ã«â%âå€ãæå®ãããšãåçŽæ¹åã®å€ãç¡èŠãããŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»Edge 17 æªæº
ã»Firefox 60 æªæº
<div class="flex-container">
<div class="flex-item">
<div class="flex-inner">ã¢ã€ãã </div>
</div>
<div class="flex-item">
<div class="flex-inner">ã¢ã€ãã </div>
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
}
.flex-item {
padding-top: 15%;
padding-right: 15%;
}
/* è£
食 */
.flex-item {
background-color: #c4ddb9 ;
}
.flex-inner {
padding: 1em;
background-color: #a1c6e7 ;
}
ãã°ãä¿®æ£ããã«ã¯ãFlexâã¢ã€ãã ã®æ¬äŒŒèŠçŽ â::beforeâã§åçŽæ¹åã®âpaddingâãæå®ããŸãã
.flex-container {
display: flex;
}
.flex-item {
padding-right: 15%;
}
.flex-item::before {
display: block;
padding-top: 50%;
content: '';
}
æ¬äŒŒèŠçŽ ã«ããããšã§âFlexâã¢ã€ãã ã§ã¯ãªãããã®åèŠçŽ ãšãªãããããã°ãåé¿ã§ããŸãã
Flexâã¢ã€ãã ãæœ°ãã
Flexã³ã³ãããããFlexã¢ã€ãã ã®å¹ ã®åèšãé·ãå Žåãflex-shrinkâããããã£ã®å€ã«ãã£ãŠçž®å°ããããã©ãããæ±ºãŸããŸãã
CSS Flexible Box Layout Module Level 1âã«ãããšãFlexâã¢ã€ãã ã¯é·ãè±æ°åæååãªã©ã®ã³ã³ãã³ãã®æå°ãµã€ãºãäžåããŸã§çž®å°ããªããšãã仿§ããããŸãã
ãããã以äžã®ãã©ãŠã¶ã§ã¯ã³ã³ãã³ãã®æå°ãµã€ãºãäžåã£ãŠå¹ ãèšç®ãããŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»Chrome 44 æªæº
ã»Opera 31 æªæº
ã»Safari 10 æªæº
ã»iOS Safari 10 æªæº
ã»Android 44 æªæº
ãã®çµæãFlexâã¢ã€ãã ãâFlexâã³ã³ããã®å¹ ã«åãŸãããšããŠã朰ããŠããŸããŸãã
<div class="flex-container">
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
width: 200px;
}
/* è£
食 */
.flex-item {
margin: 1em;
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãFlexâã¢ã€ãã ã§âflex-shrinkâããããã£ã«â0ãflex-basisâããããã£ã«âautoâãæå®ããŸãã
.flex-container {
display: flex;
width: 200px;
}
.flex-item {
flex-shrink: 0;
}
ãã ããflex-basisâããããã£ã®åæå€ã¯âautoâãªã®ã§çç¥ããŠããŸãã
flex-basisâãã¢ãã¡ãŒã·ã§ã³ããªã
flex-basisâããããã£ã®å€ãâtransitionâãâanimationâãããããšããŠããå€åããŸããã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10-11
ã»Safari
ã»iOS Safari
<div class="flex-container">
<div class="flex-item">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
}
.flex-item {
flex-basis: 20%;
animation: anime 1s infinite;
}
@keyframes anime {
0% {
flex-basis: 20%;
}
100% {
flex-basis: 100%;
}
}
/* è£
食 */
.flex-container {
padding: 2em;
background-color: #f1f0fb ;
}
.flex-item {
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãflex-basisâã§ã¯ãªã代ããã«âwidthâãâheightâããããã£ã䜿ããŸãã
.flex-container {
display: flex;
}
.flex-item {
width: 20%;
animation: anime 1s infinite;
}
@keyframes anime {
0% {
width: 20%;
}
100% {
width: 80%;
}
}
justify-contentâãå¹ããªã
max-widthâããããã£ãæå®ãããŠãããšãjustify-contentâããããã£ã䜿ã£ãŠãâFlexâã¢ã€ãã ãæããŸããã
ãã°ãçºçãããã©ãŠã¶
ã»IE 11
ãŸããflex-directionâããããã£ã«âcolumnâãæå®ããŠããå Žåã¯ãmax-heightâããããã£ãšã®äœµçšã§ãã°ãçºçããŸãã
<div class="flex-container center">
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
</div>
<div class="flex-container space">
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
}
.center {
justify-content: center;
}
.space {
justify-content: space-between;
}
.flex-item {
flex: 1 0 0%; /* åç
§ flex-basisãå¹ããªã */
max-width: 25%;
}
/* è£
食 */
.flex-container {
margin: 1em;
padding: 1em;
background-color: #f1f0fb ;
}
.flex-item {
margin: 1em;
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãmax-widthâããããã£ã§ã¯ãªãâflexâããããã£ã ãã§è¡šçŸããããã«ããŸãã
.flex-container {
display: flex;
}
.center {
justify-content: center;
}
.space {
justify-content: space-between;
}
.flex-item {
flex: 0 1 25%;
}
flexâããããã£ã®ãã¡ãflex-shrinkâã«â1ãflex-basisâã«â25%âãæå®ããã°ãmax-widthâã«â25%âãæå®ãããšããšåã广ã«ãªããŸãã
align-items: center;âãã¯ã¿åºã
Flexâã³ã³ããã®âflex-directionâããããã£ã«âcolumnãalign-itemsâããããã£ã«âcenterâãæå®ãããŠãããšãFlexâã¢ã€ãã ãâFlexâã³ã³ãããã倧ããå Žåã«ã¯ã¿åºãŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10-11
<div class="flex-container">
<div class="flex-item">
...
</div>
</div>
/* ãã°éšå */
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
width: 450px;
}
/* è£
食 */
.flex-container {
padding: 2em;
background-color: #f1f0fb ;
}
.flex-item {
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãFlexâã¢ã€ãã ã§âmax-widthâããããã£ã«â100%âãæå®ããŸãããŸããpaddingâããããã£ã§äœçœãäœã£ãŠããå Žåã¯âbox-sizingâããããã£ã«âborder-boxâãæå®ããŸãã
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
width: 450px;
}
.flex-item {
box-sizing: border-box;
max-width: 100%;
}
ãã ããFlexâã¢ã€ãã ã§âmarginâããããã£ãæå®ãããŠããå Žåã¯ãbox-sizingâããããã£ãæå®ããŠã广ããªãã®ã§ãmarginâã®ä»£ããã«âpaddingâããããã£ã䜿ããŸãããã
flex: 1;âãæœ°ãã
Flexâã³ã³ããã®âflex-directionâããããã£ã«âcolumnãFlexâã¢ã€ãã ã®âflexâããããã£ã«â1âãæå®ãããŠãããšé«ããæœ°ããŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10-11
æ®éã¯âflexâããããã£ã«â1âãæå®ãããšãflex-growâããããã£ã«â1âãæå®ããããšã¿ãªããã1 1 0âãšãªããŸããflex-growâããããã£ã«â1âãæå®ãããŠãããããflex-basisâããããã£ã«â0âãæå®ãããŠããŠãã¹ããŒã¹ãã£ã±ãã«åºããã®ã§åé¡ãããŸããã
ããããflex-directionâããããã£ã«âcolumnâãæå®ãããŠããå Žåã¯ãflex-growâããããã£ãç¡èŠãããŠâflex-basisâã ããè©äŸ¡ãããŸãã
ãã®çµæãé«ããâ0âã«ãªã£ãŠæœ°ããŠããŸããŸãã
<div class="flex-container">
<div class="flex-item">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
flex-direction: column;
width: 450px;
}
.flex-item {
flex: 1;
}
/* è£
食 */
.flex-container {
padding: 2em;
background-color: #f1f0fb ;
}
.flex-item {
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãã·ã§ãŒããã³ãå ã®âflex-basisâããããã£ã«âautoâãæå®ããŠãã³ã³ãã³ãã®é«ãã§å€æãããããã«ããŸãã
.flex-container {
display: flex;
flex-direction: column;
width: 450px;
}
.flex-item {
flex: 1 0 auto;
}
min-heightâãå¹ããªã
Flexâã³ã³ããã§âmin-heightâããããã£ãæå®ãããŠãããšãFlexâã¢ã€ãã ã®é«ããèšç®ãããŸããã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10-11
<div class="flex-container">
<header class="flex-item-header">
ããããŒ
</header>
<main class="flex-item-main">
...
</main>
<footer class="flex-item-footer">
ããã¿ãŒ
</footer>
</div>
/* ãã° */
.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.flex-item-main {
flex: 1 0 auto; /* åç
§ flex: 1; ãæœ°ãã */
}
/* è£
食 */
.flex-container {
background-color: #f9f8fe ;
}
.flex-item-header,
.flex-item-main,
.flex-item-footer {
padding: 1em;
}
.flex-item-header,
.flex-item-footer {
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãmin-heightâã®ä»£ããã«âheightâããããã£ã䜿ããŸãã
.flex-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.flex-item-main {
flex: 1 0 auto; /* åç
§ flex: 1; ãæœ°ãã */
}
.flex-item-header,
.flex-item-footer {
flex-shrink: 0; /* åç
§ Flexã¢ã€ãã ãæœ°ãã */
}
ãããã.flex-item-mainâå ã®ã³ã³ãã³ããå€ããªããšãéäžã§èæ¯è²ãéåããŠããŸãããšããããŸãã100vhâãšããã®ã¯ãã©ãŠã¶ã®é«ãã衚ããŠããããã©ãŠã¶ã®é«ããããã³ã³ãã³ãéãå¢ããã°èæ¯è²ãéåããã®ãçè§£ã§ããŸãã
åã«ãèæ¯è²ãéåããã®ã解決ããããªãã.flex-item-mainâèŠçŽ ã«â.flex-item-containerâèŠçŽ ãšåãèæ¯è²ãæå®ããã°ããã§ãã
ãã ã.flex-item-containerâéšåã®é«ããåºæºãšããŠçµ¶å¯Ÿé 眮ãããããå Žåã¯ãæ£ããé«ããå¿ èŠãšãªããããmin-heightâã®ä»£ããã«âheightâããããã£ãäœ¿ãæ¹æ³ã§ã¯è§£æ±ºã§ããŸããã
ããã§ãã©ãããŒèŠçŽ ã䜿ããŸãã
<div class="flex-wrapper">
<div class="flex-container">
<header class="flex-item-header">
ããããŒ
</header>
<main class="flex-item-main">
...
</main>
<footer class="flex-item-footer">
ããã¿ãŒ
</footer>
</div>
</div>
.flex-wrapper {
display: flex;
flex-direction: column;
}
.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.flex-item-main {
flex: 1 0 auto; /* åç
§ flex: 1; ãæœ°ãã */
}
.flex-wapperâèŠçŽ ã«âflexâãæå®ããŠå ¥ãåã«ãããšãåèŠçŽ ã§âmin-heightâããããã£ã䜿ã£ãŠããã°ãçºçããŸããã
flex-basisâãå¹ããªã
ã·ã§ãŒããã³ãã®âflexâããããã£ã§âflex-basisâã«åäœãªãã®å€ãæå®ãããšãç¡èŠãããŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10-11
åœæã®ä»æ§ã§ã¯ãflexâã·ã§ãŒããã³ãå ã®âflex-basisâå€ã«ã¯åäœãã€ããªããã°ãªããªãã£ãã®ã§ãåäœããªãå Žåã¯ç¡èŠããããã«ãªã£ãŠããŸããã
<div class="flex-container">
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
}
.flex-item {
flex: 1 0 0;
}
/* è£
食 */
.flex-container {
padding: 1em;
background-color: #f1f0fb ;
}
.flex-item {
margin: 1em;
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãåäœãã€ããŠå€ãæå®ããã ãã§ãã
.flex-container {
display: flex;
}
.flex-item {
flex: 1 0 0%;
}
åäœã¯äœã§ãããã®ã§ããã0pxâã ãšCSSã®å§çž®ããŒã«ã§åäœãåé€ãããŠããŸãããã0%âã䜿ããšããã§ãã
ã¢ã¹ãã¯ãæ¯ã厩ãã
imgâãªã©åºæã®é«ããšå¹ ããã€èŠçŽ ãâFlexâã¢ã€ãã ã«ãããšãé«ãããã®ãŸãŸâFlexâã¢ã€ãã ã®é«ãã«ãªã£ãŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10-11
ã€ãŸããå¹ ã¯äŒžçž®ããã®ã«å¯Ÿããé«ãã¯ãã®ãŸãŸãªã®ã§ã¢ã¹ãã¯ãæ¯ã厩ããŠããŸããŸãã
<div class="flex-container">
<img class="flex-item" src="https://placehold.jp/40/d6d6d6/ffffff/700x200.png">
</div>
/* ãã° */
.flex-container {
display: flex;
flex-direction: column;
width: 300px;
height: 300px;
}
.flex-item {
width: 100%;
height: auto;
}
/* è£
食 */
.flex-container {
background-color: #f1f0fb ;
}
ãã°ãä¿®æ£ããã«ã¯ãFlexâã¢ã€ãã ã§âmin-heightâããããã£ã«â1pxâãæå®ããŸãã
.flex-container {
display: flex;
flex-direction: column;
width: 300px;
height: 300px;
}
.flex-item {
width: 100%;
height: auto;
min-height: 1px;
}
box-sizing: border-box;âãå¹ããªã
flex-basisâããããã£ã«æå®ãããå€ããbox-sizingâããããã£ã«âborder-boxâãæå®ããŠãâpaddingâãâborderâãèæ ®ãããŸããã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10-11
ãã®çµæãpaddingâãšâborderâã®å¹ åã¯ã¿åºããŠããŸããŸãã
<div class="flex-container">
<div class="flex-item">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
}
.flex-item {
box-sizing: border-box;
flex: 0 0 100%;
padding: 1em;
border: 1px solid #8e83e1 ;
}
/* è£
食 */
.flex-container {
padding: 2em;
background-color: #f1f0fb ;
}
.flex-item {
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãmax-widthâããããã£ã«âflex-basisâããããã£ãšåãå€ãæå®ããŸãã
.flex-container {
display: flex;
}
.flex-item {
box-sizing: border-box;
flex: 0 0 100%;
max-width: 100%;
padding: 1em;
border: 1px solid #8e83e1 ;
}
ä»ã«ããFlexâã¢ã€ãã å ã«èŠçŽ ãå ¥ãåã«ããŠãpaddingâãâborderâããããã£ã®æå®ã ãå¥ã«ããŠããŸãæ¹æ³ããããŸãããmax-widthâããããã£ã䜿ã£ãæ¹æ³ã®æ¹ãç°¡åã§ããã
flex-basisã§calc()ã䜿ããªã
flexâã·ã§ãŒããã³ãã§âflex-basisâããããã£ã«âcalc()âã䜿ã£ãŠãç¡èŠãããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10-11
<div class="flex-container">
<div class="flex-item">
<p>...</p>
</div>
<div class="flex-item">
<p>...</p>
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
}
.flex-item {
flex: 0 0 calc(100% / 2);
}
/* è£
食 */
.flex-container {
padding: 1em;
background-color: #f1f0fb ;
}
.flex-item p {
margin: 1em;
padding: 1em;
color: #8e83e1 ;
text-align: center;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãflexâã·ã§ãŒããã³ãã䜿ããã«âflex-basisâããããã£ã ãå¥ã§æå®ããŸãã
.flex-container {
display: flex;
}
.flex-item {
flex: 0 0;
flex-basis: calc(100% / 2);
}
ããã§ãIE11âã¯ä¿®æ£ã§ããŸããããIE10âã®å Žåã¯ããããâflex-basisâããããã£ã«âcalc()âã䜿ããªãã®ã§ä»£ããã«âwidthâããããã£ã䜿ããŸãã
.flex-container {
display: flex;
}
.flex-item {
width: calc(100% / 2);
}
margin: auto;âãå¹ããªã
flex-directionâããããã£ã«âcolumnâãæå®ããŠããå ŽåãFlexâã¢ã€ãã ã§âmarginâããããã£ã«âautoâãæå®ããŠãæ°Žå¹³æ¹åãäžå€®æãã«ãªããŸããã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10-11
ããã¯ãalign-selfâããããã£ã®åæå€ãâstretchâã§ããããã§ãã
<div class="flex-container">
<div class="flex-item">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
flex-direction: column;
height: 200px;
}
.flex-item {
margin: auto;
}
/* è£
食 */
.flex-container {
padding: 2em;
background-color: #f1f0fb ;
}
.flex-item {
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãFlexâã¢ã€ãã ã§âalign-selfâããããã£ã«âcenterâãæå®ããããFlexâã³ã³ããã§âalign-itemsâããããã£ã«âcenterâãæå®ããŸãã
.flex-container {
display: flex;
flex-direction: column;
height: 200px;
}
.flex-item {
align-self: center;
margin: auto;
}
flexâã®åæå€ãç°ãªã
çŸåšã®ä»æ§ã§ã¯ãflexâã·ã§ãŒããã³ãã䜿ã£ããšãã®âflex-shrinkâããããã£ã®åæå€ã¯â1âã§ãããåœæã®ä»æ§ã§ã¯â0âã«ãªã£ãŠããŸããã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10
ãã®çµæãIE10âã ãç°ãªãæç»ã«ãªã£ãŠããŸããŸãã
æå®ãªã â flex: 0 0 auto;ïŒflex: 0 1 auto;ïŒ
flex: 1; â flex: 1 0 0px;ïŒflex: 1 1 0;ïŒ
flex: auto; â flex: 1 0 auto;ïŒflex: 1 1 auto;ïŒ
flex: initial; â flex: 0 0 auto;ïŒflex: 0 1 auto;ïŒ
æ¬åŒ§å ãçŸåšã®ä»æ§ã§ããIE10âã®å Žåã¯ãflex-shrinkâããããŠâ0âã«ãªã£ãŠããããšãããããŸãã
.flex-item {
flex-shrink: 1;
}
.flex-item {
flex: 1 1 50%;
}
ãã°ãä¿®æ£ããã«ã¯ãFlexâã¢ã€ãã ã§âflex-shrinkâããããã£ã«â1âãæç€ºããããflexâããããã£å
ã®âflex-shrinkâã«â1âãæå®ããŸãã
ã€ã³ã©ã€ã³èŠçŽ ãFlexã¢ã€ãã ã«ãªããªã
ã€ã³ã©ã€ã³èŠçŽ ãšâ::beforeâãâ::afterâæ¬äŒŒèŠçŽ ãâFlexâã¢ã€ãã ãšããŠæ±ãããŸããã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10
<div class="flex-container">
<span class="flex-item">
...
</span>
<div class="flex-item">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
}
.flex-container::before {
content: '::beforeã¢ã€ãã ';
}
.flex-container::before,
.flex-item {
flex: 1;
}
/* è£
食 */
.flex-container {
padding: 1em;
background-color: #f1f0fb ;
}
.flex-container::before,
.flex-item {
margin: 1em;
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãFlexâã¢ã€ãã ãã€ã³ã©ã€ã³èŠçŽ ã§ãªããã°ããã®ã§ãâdisplayâããããã£ã®å€ã«âblockâãâinline-blockãflexâãªã©ãæå®ããŸãã
.flex-container {
display: flex;
}
.flex-container::before {
content: '::beforeã¢ã€ãã ';
}
.flex-container::before,
.flex-item {
display: block;
flex: 1;
}
!importantãå¹ããªã
flexâã·ã§ãŒããã³ãã§â!importantâãæå®ããŠãããšãflex-basisâããããã£ã®å€ã ãç¡èŠãããŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»IE 10
<div class="flex-container">
<div class="flex-item important">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
}
.important {
flex: 0 0 100% !important;
max-width: 100%; /* åç
§ box-sizing: border-box; ã«éå¯Ÿå¿ */
}
.flex-item {
flex: 0 0 auto;
}
/* è£
食 */
.flex-container {
padding: 2em;
background-color: #f1f0fb ;
}
.flex-item {
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãflex-basisâããããã£ã ãåå¥ã«æå®ããŸãã
.flex-container {
display: flex;
}
.important {
flex: 0 0;
flex-basis: 100% !important;
max-width: 100%;
}
.flex-item {
flex: 0 0 auto;
}
min/max-width/heightãå¹ããªã
flex-wrapâããããã£ã«âwrapâãæå®ãããŠãããšãmin/max-width/heightâããããã£ãç¡èŠãããŠããŸããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»Safari 10.1 æªæº
ã»iOS Safari 10.3 æªæº
Flexâã¢ã€ãã ã§âflexâããããã£ã«1ãæå®ãããŠãããšãflex-basisâã®å€ã¯â0âãšãªãããã1è¡ã«äžŠãã§ããŸããŸãã
<div class="flex-container">
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
<div class="flex-item">
...
</div>
</div>
/* ãã° */
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 1;
min-width: 100px;
}
/* è£
食 */
.flex-container {
padding: 1em;
background-color: #f1f0fb ;
}
.flex-item {
margin: 1em;
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãflex-basisâã«ãâmin-widthâããããã£ãšåãå€ãæå®ããŸãã
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 1 0 100px;
min-width: 100px;
}
min-widthâãšâmax-widthâããããã£äž¡æ¹ã䜿çšããå Žåã¯ãflex-basisâããããã£ã«âmin-widthâãšâmax-widthâã®ç¯å²å ã®ã©ããã®å€ãæå®ããŸããflex-basisâããããã£ã«å€ãæå®ããããã°ããã°ãåé¿ã§ããŸãã
align-items: baseline;âãå¹ããªã
Flexâã³ã³ãããå ¥ãåã«ãããšãalign-itemsâããããã£ã®âbaselineâå€ãå¹ããªããªããŸãã
ãã°ãçºçãããã©ãŠã¶
ã»Firefox 52 æªæº
<div class="outer-flex-container">
<div class="flex-item">
...
</div>
<div class="flex-item">
<div class="inner-flex-container">
...
</div>
...
</div>
</div>
/* ãã° */
.outer-flex-container,
.inner-flex-container {
display: flex;
}
.outer-flex-container {
align-items: baseline;
}
/* è£
食 */
.outer-flex-container {
padding: 1em;
background-color: #f1f0fb ;
}
.flex-item {
margin: 1em;
padding: 1em;
color: #8e83e1 ;
background-color: #dbd7f5 ;
}
ãã°ãä¿®æ£ããã«ã¯ãå ¥ãåã®âFlexâã³ã³ããã§âflexâã®ä»£ããã«âinline-flexâã䜿ããŸããinline-flexâã«ãããšå¹ ãã³ã³ãã³ãã®å¹ ã«ãªãã®ã§ãå¿ èŠãªå Žåã¯âwidthâããããã£ã«â100%âãããããŠæå®ããŠãããŸãã
.outer-flex-container {
display: flex;
align-items: baseline;
}
.inner-flex-container {
display: inline-flex;
width: 100%;
}
æ°è»œã«ã¯ãªãšã€ã¿ãŒã®æ¯æŽãšãèšäºã®ãªã¹ã¹ã¡ãã§ããŸãïŒ