2
flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これまで、inline-block やfloat などを利用してきましたが、他にもたくさんのコードを記述しないと横並びにならなかったのです。手間のかかるものでした。しかし、これからはflexbox があるから大丈夫！簡単に実装できますよ。
3
flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これまで、inline-block やfloat などを利用してきましたが、他にもたくさんのコードを記述しないと横並びにならなかったのです。手間のかかるものでした。しかし、これからはflexbox があるから大丈夫！簡単に実装できますよ。
4
flexboxは、要素の横並びなど配列する際に使用するCSS3コードです。これまで、inline-block やfloat などを利用してきましたが、他にもたくさんのコードを記述しないと横並びにならなかったのです。手間のかかるものでした。しかし、これからはflexbox があるから大丈夫！簡単に実装できますよ。
/*************************/
/******* content-wrap ****/
/*************************/
.contents-wrap {
display: flex;
justify-content: space-between;
margin-bottom: 7rem;
}
.contents-wrap:nth-child(odd) {
flex-direction: row-reverse;
}
.contents-text {
width: 60%; /*flex: 2;*/
}
.contents-img {
width: 60%; /*flex: 1;*/
}
.contents-text h2 {
margin-bottom: 2rem;
font-size: 2.2rem;
}
.contents-img img {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 768px){
.contents-wrap,
.contents-wrap:nth-child(odd) {
flex-direction: column;
}
.contents-text,
.contents-img {
width: 100%; /*flex: 1;*/
}
.contents-text {
padding: 3rem;
}
.contents-text h2 {
text-align: center;
}
}
