positionの練習
positionの練習となっていますが・・、私はpositionを使っていません。
完成図(スマホ・PC)
htmlと全体のスタイル
スマホスタイル
PCスタイル
青と緑を横並び
flex-shrink について
/* フレックスコンテナーである親の幅は 1000px*/
.content {
max-width: 1000px;
margin: 0 auto;
display: flex;
}
/* フレックスアイテムの幅の合計値は 680px + 400px = 1080px
flex-shrink は 1000px に 強制的にflexアイテム縮小して横並びにするため
flex-shrink:0; で 縮小を禁止している。
その場合、80px分はフレックスコンテイナーからはみ出る。
*/
.text {
max-width: 680px;
/* paddingはwidthの内側を縮小させる。 */
padding: 84px 160px 84px 84px;
flex-shrink: 0;
}
.img {
max-width: 400px;
flex-shrink: 0;
/* ネガティブマージン で 要素を重ねている */
margin-left: -100px;
}
画像を斜めに表示する練習
全体のスタイル
完成図(スマホ・PC)
left - left疑似要素 - right の順で上からかぶさっている。
htmlコード
スマホスタイル
PCスタイル
行数が異なる画像の横並びの練習
完成図(スマホ・PC)
htmlコード と 全体のスタイル
スマホスタイル
PCスタイル
- flex-wrap と flex-shrink
/*
flex は 横並びを強制する margineの6px分は
flex-shrinkがデフォルトの1のため
お互いのwidthが縮小されて横並びになる
*/
.flex {
display: flex;
/* flex-wrap:nowrap; デフォルト */
}
.flex .left {
width: 40%;
margin-right: 6px;
/* flex-shrink:1; デフォルト */
}
.flex .right {
width: 60%;
/* flex-shrink:1; デフォルト */
}