もちろんです!
サンプル
HTML
1<p><span>□</span><span>□</span><span>□</span><span>□</span><span>□</span><span>□</span></p>
2<p class="flex"><span>□</span><span>□</span><span>□</span><span>□</span><span>□</span><span>□</span></p>
css
1p{
2 width:2em;
3}
4.flex{
5 display:flex;
6 flex-flow:wrap;
7}
質問が変更になったため追記
できますよ!
サンプル
html
1<div class="box-wrapper horizontal">
2 <div class="box box1">1</div>
3 <div class="box box2">2</div>
4 <div class="box box3">3</div>
5 <div class="box box4">4</div>
6 <div class="box box5">5</div>
7 <div class="box box6">6</div>
8</div>
9<div class="box-wrapper pair">
10 <div class="box box1">1</div>
11 <div class="box box2">2</div>
12 <div class="box box3">3</div>
13 <div class="box box4">4</div>
14 <div class="box box5">5</div>
15 <div class="box box6">6</div>
16</div>
17<div class="box-wrapper vertical">
18 <div class="box box1">1</div>
19 <div class="box box2">2</div>
20 <div class="box box3">3</div>
21 <div class="box box4">4</div>
22 <div class="box box5">5</div>
23 <div class="box box6">6</div>
24</div>
css
1.box-wrapper {
2 display: flex;
3 width:100%;
4 flex-flow:wrap;
5}
6.horizontal{
7 flex-flow:nowrap;
8}
9
10.box {
11 border: 1px solid black;
12 box-sizing: border-box;
13 width:100%;
14 height: 100px;
15}
16.vertical .box {
17 width: 100%;
18}
19.pair .box {
20 width: 50%;
21}
22
コメントを受けて追記
メディアクエリの例です。ウィンドウのサイズを変えてみてください。
サンプル
css
1.box-wrapper {
2 display: flex;
3 width:100%;
4}
5
6.box {
7 border: 1px solid black;
8 box-sizing: border-box;
9 width:100%;
10 height: 100px;
11}
12@media screen and (max-width: 768px){
13 .box-wrapper {
14 flex-flow:wrap;
15 }
16 .box {
17 width: 50%;
18 }
19}
20@media screen and (max-width: 480px){
21 .box {
22 width: 100%;
23 }
24}