[TIL] CSS 3: Flexbox

Display

{display: block;}
{display: flex;}
{display: inline-flex;}

Main axis

1. Justify-content

{justify-content: flex-start;}
{justify-content: flex-end;}
{justify-content: center;}
{justify-content: space-around;}
{justify-content: space-between;}

2.Flex grow拡大縮小Flex収縮

.top.side {flex-grow: 1;}
.top.center {flex-grow: 1;}

.middle.side {flex-grow: 2;}
.middle.center {flex-grow: 1;}

.bottom.side {flex-grow: 1;}
.bottom.center {flex-grow: 2;}

3. Flex-basis

.grow.side {
flex-basis: 60px;
flex-grow: 1;
}
.grow.center {
flex-grow: 3;
}

.shrink.side {
flex-basis: 300px;
flex-shrink: 3;
}
.shrink.center {
flex-shrink: 2;
flex-basis: 150px;
}

4. Flex-wrap

Cross axis

1. Align-items

{align-items: flex-start;}
{align-items: flex-end;}
{align-items: center;}
{align-items: baseline;}

{min-height: 75px ;}
max-height:'}

2. Align-content

(+)

1. Flex-direction

2. Flex-flow