画像の横並びについて

katudousyoukai.pngとmousikomi.pngとtoiawase.pngを横並びにしました。これをどの端末で開いても、横並び一列になるようにするにはどうすればよいでしょうか。class ="menue"のwidthをいじってもうまくいきません。また、左右に出る余白もなくしたいです。

<body>

<style>

* {
    margin: 0px;
    padding: 0px;
}


.header {
   width: 100%;
   height: auto;
 }

.menue {
   width: ??;
   height: auto;
 }

.font1 {
    font-size: 20px;
    font-family: "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif";
}

.center{
     border: 1px solid #aaa;
     width: 400px;
     text-align: center;
}

.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    padding:  0px;             /* 余白指定 */
    height: 100px;              /* 高さ指定 */
}

.parent {
    text-align: center;         /* 子要素を左右中央揃えにする */
    border: solid 0px;          /* 枠線指定 */
    padding:  0px;             /* 余白指定 */
}

</style>

  <body bgcolor="CCFF99">
    <header>
      <img src="figure1.png" class="header" alt="" />
    </header>
    
  <div class="parent">
     <div class="inline-block_test">
    　 <a href=""><img src="katudousyoukai.png" class="menue" alt="" width="" height=""/></a>
         </div>
     <div class="inline-block_test">
    　 <a href=""><img src="mousikomi.png" class="menue" alt="" width="" height=""/></a>
         </div>
     <div class="inline-block_test">
    　 <a href=""><img src="toiawase.png" class="menue" alt="" width="" height=""/></a>
         </div>
  </div>
  

  
 
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1.parent {
2    display: flex;
3}
4.parent img {
5    width: 100%;
6}
7```**動くサンプル：**[https://jsfiddle.net/cjwLogfr/](https://jsfiddle.net/cjwLogfr/)
8
9---
10
11【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
12[http://www.webcreatorbox.com/tech/flexbox/](http://www.webcreatorbox.com/tech/flexbox/)
13
14【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
15[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)
16
17【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
18[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)
19
20【よこ並びのCSS。】
21[http://lopan.jp/layout/](http://lopan.jp/layout/)