flowにcolumn

Flexbox and float

float:left; はflex /float: right; とoverflow: hidden;

Responsive grid

100% 50% 25% gallary

</div>

   .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px; margin にすると100%を飛び出してしまうから
    左右のpadding
  }

  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  .column img {
    margin-top: 8px; 縦方向は横方向と違って余裕がある
    vertical-align: middle;
  }
  .gallaryfloat {
   width:58%;
   float:left;
  }
  pre .float {
   float: right;
   width: 40%;
   overflow-x: auto;
  }
  @media (max-width: 900px) { max-width:900px 以下のとき
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }

  @media (max-width: 600px) { max-width:600px 以下のとき
    .column {
      flex: 100%;
      max-width: 100%
    }
  }
  @media (max-width: 900px) {
   .gallaryfloat {
    float: none;
    clear: both;
    width:100%;
   }
  }  
  @media (max-width: 900px) {
   pre .float {
    float: left;
    clear: both;
    width: 100%;
   }
  }

  =====
   <div style="overflow: hidden;">
 枠に収めるようにhiddenと前後のclear: both;
<div style="width: 58%; border: 3px solid orange; float: left">
 ~~~~~
</div>
<pre class="float source" style="float: right; width: 40%;"
overflow-x: scroll;>
overflow-x: scroll;<pre>部分だけにx方向のスクロールバーを表示
 ~~~~
</pre>

@media (max-width: 800px){} 800pxの後ろに";"は要らない。

CSS Display property

flex-basis: The length of the item. the number followed by "%", "px", or "em".
flex: 50%;

CSS @media Rule

Responsive navigation bar and CSS column property

Link 1 Link 2 Link 3 Link 4

.topnav1 { overflow: hidden; background-color: #333; } .topnav1 a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } .topnav1 a:hover { background-color: #ddd; color: black; } @media screen and (max-width:800px) { .topnav1 a { float: none; width: 100%; } } .column-multi1 { column-count: 3; column-gap: 30px; column-rule: 2px double grey; } @media screen and (max-width: 800px) { .column-multi1 { column-count: 2; } }

column-count: 3 to 2(@media screen and(max-width:800px))

CSS multiple columns

float with multiple columns

multiple column 1

4 columns layout 900px wider backgound-color: lightgrey;, the colmns will 2 columns when the screen width 900px wide or less backbround-color: lightblue;. When 600px wide or less, the colulmns width 100% background-color: hsla(16, 100%, 66%, 0.7).

multiple column 2

4 columns layout 900px wider backgound-color: lightgrey;, the colmns will 2 columns when the screen width 900px wide or less backbround-color: lightblue;. When 600px wide or less, the colulmns width 100% background-color: hsla(16, 100%, 66%, 0.7).

multiple column 3

4 columns layout 900px wider backgound-color: lightgrey;, the colmns will 2 columns when the screen width 900px wide or less backbround-color: lightblue;. When 600px wide or less, the colulmns width 100% background-color: hsla(16, 100%, 66%, 0.7).

multiple column 4

4 columns layout 900px wider backgound-color: lightgrey;, the colmns will 2 columns when the screen width 900px wide or less backbround-color: lightblue;. When 600px wide or less, the colulmns width 100% background-color: hsla(16, 100%, 66%, 0.7).

 .row-m::after {
  content: "";
  display: table;
  clear: both;
 }
 .column-float {
  float: left;
  width: 25%;
  padding: 15px;
  background-color: lightgrey;
 }
 @media screen and (max-width:900px) {
  .column-float {
   width: 50%;
   background-color: lightblue;
  }
 }
 @media screen and (max-width: 600px) {
  .column-float {
   width: 100%;
   background-color: hsla(16, 100%, 66%, 0.7);
  }
 }

use display: flex; and flex: 25%/50%/100%
flex-direction: column;

column with flex

4 columns flex: 25%; . 2 columns flex: 50%; . 1 column flex:100%; , or container<div> flex-direction: column; .

column with flex

4 columns flex: 25%; . 2 columns flex: 50%; . 1 column flex-direction: column; .

column with flex

4 columns flex: 25%; . 2 columns flex: 50%; . 1 column flex-direction: column; .

column with flex

4 columns flex: 25%; . 2 columns flex: 50%; . 1 column flex-direction: column; .

 .row-flex {
  display: flex;
  flex-wrap: wrap;
 }
 .column-flex {
  flex: 25%;
  padding: 15px;
  background-color: lightgrey;
 }
 @media screen and (max-width: 900px) {
  .column-flex {
   flex: 50%;
   background-color: lightblue;
  }
 }
 @media screen and (max-width: 600px) {
  .column-flex {
   /*flex: 100%;*/

   background-color: hsla(16, 100%, 66%, 0.7);
  }
 }
 @media screen and (max-width: 600px) {
  .row-flex {
   flex-direction: column;
  }
 }