Flexboxの練習

- 12月 30, 2019

Flexbox

The "flex-derection: column" stacks the items vertically(from top to bottom): column-reverse(from bottom to top)

flex-derection: row stacks the items horizontally(from left to right) :row-reverse (from right to left)
flex-wrap: wrap/wrap-reverse;
flex-flow: row wrap;

  .flex-container-row {
    display: flex;
    /*flex-direction: row; */
    background-color: DodgerBlue;
    /*flex-wrap: wrap; */
    flex-flow: row wrap;
  }

flex-flow: row-reverse wrap-reverse;

  .flex-container-rowreverse {
    display: flex;
    /*flex-direction: row-reverse; */
    background-color: lightblue;
    /*flex-wrap: wrap-reverse; */
    flex-flow: row-reverse wrap-reverse;
  }

justify-content: center

justify-content: center;

   .flex-container-justify {
    display: flex;
    justify-content: center;
    background-color: DodgerBlue;
    ========
  <div class="flex-container-justify">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

justify-content: flex-start;

justify-content: flex-end;

justify-content: space-around;

justify-content: space-between;

CSS Styling Images
CSS object-fit
HTML figcaption Tag
HTML img Tag
HTML Global attributes
HTML cite Tag
HTML tag Reference

align-items: flex-start/ center/ flex-end / stretch/ baseline/;

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: stretch;

align-items: baseline;/ with headline for character

1

2

3

4

6

align-content: space-between/ space-around/ stretch/ center/ flex-start/ flex-end/

align-content: space-between;

align-content: space-around;

align-content: stretch;

align-content: center;

align-content: flex-start;

align-content: flex-end;

Perfect Centering

justify-content: center; align-items: center;

1

flex property: flex-grow/flex-shrink/flex-basis
order/align-self/

the order

  <div class="flex-container-justify">
  <div style="order: 4">1</div>
  <div style="order: 2">2</div>
  <div style="order: 6">3</div>
  <div style="order: 1">4</div>
  <div style="order: 3">5</div>
  <div style="order: 5">6</div>
</div>

justify-content: center;

flex-grow: 0(default value) 0~must be a number.0以上の整数。

flex-flow: row-reverse; flex-wrap: wrap-reverse;

.flex-container-rowreverse {
    display: flex;
    /*flex-direction: row-reverse; */
    background-color: lightblue;
    /*flex-wrap: wrap-reverse; */
    flex-flow: row-reverse wrap-reverse;
  }
  =====
  <div class="flex-container-rowreverse">
  <div style="flex-grow: 0">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 2">3</div>
  <div style="flex-grow: 3">4</div>
  <div style="flex-grow: 0">5</div>
  <div style="flex-grow: 4">6</div>
  </div>

flex-shrink: 1(default value);

    .flex-shrink {
      display: flex;
      flex-direction: row-reverse; 横並びを逆に
      align-items: stretch;
      justify-content: flex-end;並びを最後に row-reverse があるから 縮小するとflex-startのようになる
      background-color: dodgerblue;
      overflow-x: hidden; 拡大時のx方向のoverflow をなくす。
    }
    .flex-shrink > div {
      color:green;
      background-color: lightgrey;
      width:200px;
      margin: 15px;
      line-height: 75px;
      font-size: 30px;
      text-align: center;
    }
    ==
<div class="flex-shrink">
  <div>1</div> default
  <div style="flex-shrink: 0">2</div> 拡大
  <div style="flex-shrink: 2">3</div> shrink
  <div style="flex-shrink: 1">4</div> default
  <div>5</div> default
  <div>6</div> default
  <div style="flex-shrink: 0">7</div> 拡大
  <div style="flex-shrink: 4">8</div> shrink
  </div>

style="flex: 0 0 350px;他はwidth: 200px;
3 not growable(0), not shrinkable(0), width: 350px;

align-self: flex-start/center/flex-end;

flex-direction: column;

The align-self property overrides the align-items property of the container.

全体でoverflow:auto;のclearfix, 
  左はfloat:leftの flex box, flex-direction: column; width: 40%;, 
  右は float: right; overflow-x:auto; width:50%;

<div style="overflow:auto;"
<div class="flex-container-column" style="float: left;">
  <div style=align-self:center;">1</div>
  <div>2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
  <div style="width:auto;">The align-self property overrides the align-items property of the container.</div>
</div>
===========
<pre class="source" style="float: right; width: 50%; overflow-x: auto;">
<div style="overflow:auto;"
<div class="flex-container-column" style="float: left;">