FlexboxとFlex 練習
Flexbox and flex
.row-flex{display:flex; flex-wrap:wrap; }
.gallaryflex {flex:50%;}を追加。media query に対応させる。
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;
}
.row-flex {
display: flex;
flex-wrap: wrap;
}
.gallaryflex {
flex:50%;
}
@media screen and (max-width: 900px) {
.gallaryflex {
flex:100%;
}
}
@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 class="row-flex">
<div class="gallaryflex">flex: 50%;
<div style="width: 58%; border: 3px solid orange; float: left">
~~~~~
</div>
<div class="gallaryflex"
style="background-color: lightgrey; border-left: 4px solid lightgreen;
overflow-x: auto;
padding-left: 15px;">
overflow-x: auto;<pre>部分だけにx方向のスクロールバーを表示
flex: 50%;と背景色とボーダーを追加しズレをなくす。
<pre>class="source"をなくす。
~~~~
</pre></div>
.row-flex{display:flex; flex-wrap:wrap; }
.gallaryflex {flex:50%;}を追加。media query に対応させる。
.column のmedia queryがそのまま適応され50%, 100%, clear: both;で、<pre>が画面下に。
floatさせたときのように左のgallaryと<pre>部分の高さが合わないときに左右でズレていたのがflexにすることでなくなった。
@media screen and (max-width:900px){
.gallary-flex {
flex:100%;}
}
を加えることで、headerのbackground-colorが変化するときに、gallary-flexの幅を100%に。
.changesize {
background-color: lightgrey;
padding:20px;
border:1px solid black;
}
@media screen and (min-width: 900px){
.changesize {
font-size: 60px;
}
}
@media screen and (max-width: 900px) {
.changesize {
font-size: 20px;
}
}
Responsive Web Design Grid
Grid test header
The city
Chania France the capital of the Chania region on the island of Crete. クレタ島にあるハニア地区の代表都市であるハニア
what
Chania is a city on the island of Creta.
Where?
Creta is Greek island in the Mediterranean Sea.
How?
You can reach Chania airport from all over Europe.
style="list-style-type: none; margin:0; padding:0;"(ulの・bullets を取り除く)
ul style="display: inline-block; / float: left "
<div class=col-3 style="float: right;"> float: right;は有無で変化なかった。
.header-r {
border: 1px solid red;
padding: 15px;
}
.row-r::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}25% width
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;} 75% width
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
Media query breakpoints. min-width: 800px(red)/1080px(lightgreen)/1200px(orange);
.media-rr {
padding: 20px;
color: white;
}
@media only screen and (max-width: 800px) {
max-width:800px を最初書いてなかったので800px以下になると<div>ごと消えていた。
.media-rr{
background-color: pink;
}
}
@media only screen and (min-width:800px){
.media-rr{
background-color: red;
}
}
@media only screen and (min-width: 1080px){
.media-rr{
background-color: lightgreen;
}
}
@media only screen and (min-width: 1200px){
.media-rr{
background-color: orange;
}
}
<picture> <source srcset="url" media="(max-width:800px)"> <source srcset="url"> <img src="url" alt="text" style="width: auto;"> </picture>
<source srcset="">は必ず要る。<img >は対応していないブラウザ用。
コメント
コメントを投稿