css3がすっかり定着した中、結構基本的な事ですが、やっぱり使っていて便利に思うので、ご紹介しておきます。
このブログは備忘録なので、ビギナーコーダーの為にも簡単、些細な事でもご紹介していきます。
【サンプル】
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
text
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストステーキテキストテキストテキストテキストテキストテキストテキスト
【HTML】
<section class="sample"> <p>テキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>text</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストステーキテキストテキストテキストテキストテキストテキストテキスト</p> </section>
【CSS】
.sample{
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.sample p{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #1A8388;
border: solid #1A8388 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #DFF8F9;
width:23%;
margin:0 1% 15px;
padding:10px;
}
＜section＞や＜p＞である必要は全くないので、その都度必要なタグを使用すれば良いと思います。