常連

### 実現したいこと
.workingimgを横並びにしたい

newsクラスを横並びにしたい

ラベルタグのdtとddの間に余白がほしい



### 発生している問題・分からないこと
模写コーディング(https://code-jump.com/demo/html/portfolio1/)のようにならない


https://felix-915.github.io/Mywork/






### 該当のソースコード

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Work</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

 <header >
  <div class="title">
    <h1>My Work</h1>

    <ul >
      <li>About</li>
      <li>Works</li>
      <li>News</li>
      <li>Contact</li>
      <li><img src="icon-instagram.png" alt="instagrm" width="20"></li>



    </ul>

  </div>
</header> 

<div class="mainimg">
  <img src="mainvisual-pc.jpg" alt="" >
</div>
  
  
 
<main>
 <section id="about" class="container">
  <h2>About</h2>
  <p>Xxxxx Ashley</p>
  <div class="post">
  <p>
    2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan<br>
    tel: 000-0000-0000 <br>
    url: www.xxxxxx.jp <br>
    mail: xxx@xxxxxx.jp <br>
  </p>
</div>

<p>プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>


 </section>

 <section id="works" class="container">
  <h2>works</h2>
  <div class="worksimg">
    <img src="works1.jpg" alt="">
    <img src="works2.jpg" alt="">
    <img src="works3.jpg" alt="">
    <img src="works4.jpg" alt="">
    <img src="works5.jpg" alt="">
    <img src="works6.jpg" alt="">

  </div>
 </section>

 <section id="newss" class="container">
  <h2>News</h2>
   <div class="news">
          <dt>2020.XX.XX</dt>
          <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
          <dt>2020.XX.XX</dt>
          <dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
          <dt>2019.XX.XX</dt>
          <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
          <dt>2019.XX.XX</dt>
          <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
          <dt>2019.XX.XX</dt>
          <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
        </dl>
      </div>


 </section>


 <section id="contact" class="container">
  <h2>Contact</h2>
  <div class="text">
    <dl>
      <dt><label for="name">NAME</label></dt>
      <dd><input type="text" id="name" name="your-name"></dd>
      <dt><label for="email">E-mail</label></dt>
      <dd><input type="email" id="email" name="your-email"></dd>
      <dt><label for="message">MESSAGE</label></dt>
      <dd><textarea id="message" name="your-message"></textarea></dd>
    </dl>

    
  
</div>
<div class="btn">
<button>送信</button>
</div>
 </section>
</main>

<footer>
  <small>
    © 2020 My Work
  </small>
</footer>
</body>
</html>
```

```css
@charset "utf-8";

body{
  margin: 0;

}

html {
  font-size: 100%;
}
h1{
  margin: 0;
  font-weight: normal;
  font-size: 30px;
  
}

h2{
  margin: 30px;
  font-size: 22px;
  text-align: center;
  padding-bottom: 30px;

}

p{
  margin: 0;
}

img {
  max-width: 100%;
}
li {
  list-style: none;
}

header{
  max-width: 960px;
padding: 0 4%;

margin: 0px auto;

  
}

.container{
  max-width: 960px;
  margin: 0 auto;
  margin-top: 80px;

}

.title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 270px;
}

.title ul{
  display: flex;
}

.title ul li{
  font-size: 0.9rem;
margin-left: 30px;
}


.mainimg img{
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* .container{
  margin-top: 80px;
} */

#about p{
  margin: 25px;
  font-size: 14px;
}

/* dekinai */
.worksimg {
 
  display:flex;
  justify-content: space-between; 
  flex-wrap: wrap;
}

.news dl {
  display: flex;
  flex-wrap: wrap;
  border-top: solid 1px #c8c8c8;
  margin-bottom: 20px;
}
.news dt {
  width: 20%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}
.news dd {
  width: 80%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}

/* 
.text{
  display: flex;
  flex-wrap: wrap;

} */

/* .text {
  
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px ;
  
}

#name{
 width: 80%;
 height:40px;

}

#e-mail{
  width: 80%;
  height:40px;
 
 }

 #massage{
  width: 80%;
  height:100px;
 
 } */


 #contact dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#contact dt {
  width: 15%;
}
#contact dd {
  width: 85%;
  margin-bottom: 10px;
}
#contact dd input,
#contact dd textarea {
  width: 100%;
  border: solid 1px #c8c8c8;
  padding: 10px;
}
#contact dd textarea {
  height: 10rem;
}

.btn{
  text-align: center;
}

.btn button{
  

 width: 200px;
 background-color: #24292e;
 color: #fff;
 padding: 15px 0;
 border: solid 1px #24292e;
}


footer{
text-align: center;
margin-top: 100px;
background-color: #24292e;
  color: #fff;

  padding: 7px;
  font-size: 0.7rem;

}


 
 


```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
ラベルタグでは要素が横並びにならないと思い模写コーディングのようにdlタグを使用した

ラベルタグは模写コーディングと同じコードだが要素が横並びにならない



### 補足
特になし

画像が横並びになりません

htmlで作成したaタグにCSSでボタンの装飾を付けました。
そのままでは横並びになるので、親要素に

```CSS
.btn-wrapper {
  display: inline-flex;
  flex-direction: column;
}
```


として縦並びにしましたところ、縦並びにはなりましたが、ボタン幅が揃ってしまいました。
（下の幅が大きい方に揃ったのですが、本当はそれぞれのテキストに合わせた幅のボタンを縦並びにしたいのです。）

その原因がわかる方いらっしゃいますでしょうか？

以下記述したコードです。

```thml
      <div class="btn-wrapper">
        <a class="btn-1" href="#">テスト</a>
        <a class="btn-2" href="#">テストテストテスト</a>
      </div>

```

```CSS
.btn-wrapper {
  display: inline-flex;
  flex-direction: column;
}

.btn-1 {
  text-decoration: none;
  background-color: #EC84A0;
  color: #FFFFFF;
  border-radius: 32px;
  box-shadow: 3px 3px 10px #00000029;
  font-size: 16px;
  padding: 15px 30px;
  margin-bottom: 12px;
}

.btn-2 {
  text-decoration: none;
  background-color: #FFFFFF;
  color: #EC84A0;
  border-radius: 32px;
  box-shadow: 3px 3px 10px #00000029;
  border: 2px solid #EC84A0;
  font-size: 16px;
  padding: 15px 30px;
  margin-bottom: 70px;
}

```

（ちなみにbtn-wrapperの上の層にはコンテナ幅を決めるdivと、コンテンツ名のついたdivがあります。）

今回はbtn-1のみwidthとheightを付け、するとテキストが中央が外れてしまったので、line-heightでボタンのタテ中央へ調整、ボタン自体も中央から外れてしまったのでmargin: 0 auto;で中央へ、という方法を取りましたが力技のような気がしてなりません…。

今回はflex-directionを使用しましたが、もっとスマートな方法があるのでしょうか？
アイデアをお持ちの方はご教示いただけると幸いです。宜しくお願いいたします。

CSS ボタンを縦並びにしたい（ボタンの大きさは文字幅に応じたままで）

flexの画面、というのでしょうか。

mxml、as、js、jspで
WEB画面を構成しているものがあります。

デバッグすると、asにつけたブレークポイントでは止まってくれるんですが、
js、jspでは止まってくれません。

値がきちんと変数に入っているか確認したいのですが、どうすればよいですか？


よろしくお願い致します。

eclipseでのデバッグ(flex)

こんにちは。

よくある質問で、申し訳ありません。

flexboxを利用し、企業ホームページのヘッダー部分を制作しております。
Chrome、firedox等は大丈夫ですが、IE11においてバグが発生します。
現象として、右にずれて（はみ出て）しまいます。

web上の各サイト、特に「flexboxバグまとめ」（[http://qiita.com/hashrock/items/189db03021b0f565ae27](http://qiita.com/hashrock/items/189db03021b0f565ae27)）などを読みましたがイマイチ理解出来ませんでした。

どうすれば宜しいでしょうか。


以下、htmlです。
```ここに言語を入力
<div class="wrapper header_inner">
    <div class="logo">
        <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="ロゴ" />
    </div>
    <div class="sab_nav">
        <ul>
            <li><a href="#">アクセスマップ</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </div>
</div>
```

そして、該当するCSSです。
> .wrapper {
>     max-width: 1080px;
>     margin-left: auto;
>     margin-right: auto;
> }
> .header_inner {
>     padding: 20px 0;
>     display: flex;
>     justify-content: flex-end;
>     align-items: center;
> }
> .logo {
>     margin-right: auto;
> }
> .sab_nav ul {
>     display: flex;
>     font-size: 15px; 
> }
> .sab_nav li {
>     margin-left: 10px;
> }
> .sab_nav li:first-child {
>     margin-left: 0px;
> }
> .sab_nav li a {
>     display: block;
>     background: #ff0000;
>     padding: 10px 20px;
>     color: #fff;
> }

IE11でflexboxが崩れる

###前提・実現したいこと
ruby on railsで教材を参考にしながらサイトを作っています。

###発生している問題・エラーメッセージ
justify-contentが効かない
なぜかjustify-contentを実行しても左右中央になりません。

###該当のソースコード
```css
.sample {
    width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    justify-content: center;
}

.sample-contents {
    width: 400px;
    text-align: left;
}
```
```html
<div class="sample">
    <div class="sample-contents">
        <h1>sample</h1>
        <p class="sample-text">
            <u class="sample-text">sample</u>
        <h1>sample</h1>
        <p class="sample-text">
            <u class="sample-text">sample</u>
    </div>

    <div class="sample-contents">
        <h1>sample</h1>
        <i class="fa fa-facebook"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-instagram"></i>
    </div>
</div>
```

###試したこと
検索した。
しかしそれらしい症状は出てきませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
Ruby on rails
Font awesome

justify-contentが効かない

現状、
flex-flow: column wrap;　にて、縦方向へflex＆折返しさせているのですが、
任意のボックスから2列目へということは出来ますでしょうか？
今は、親要素へ高さ指定し、調整して、2列目の最初のボックスを調整しているのですが。
高さ指定での折返しだと、高さが変動してしまう仕様なので、都度都度高さ指定見直ししないといけないもので。

ご教示お願いいたします。

コードは、
```HTML
<div class="container">
<div class="box">
内容
</div>
<div class="box">
内容
</div>
<div class="box">
内容
</div>
<div class="box">
内容
</div>
</div>
```

```CSS
.container {
height: 900px;
flex-flow: column wrap;
}
.box {
height: 400px;
width: 50%;
}
```

上記コードの場合、２列になりますが、container、boxの両方のheightをautoにした場合、2つめのboxで列換えをさせる方法がありますでしょうか？？

display flex 縦並び2列　折返しの件

簡単そうですができないので、質問させて下さい。

下記のようなコードを書いているのですが、題に記載通り、aタグで囲った文字を、文字の長さがまちまちでも
全部中央揃えにしたいです。
今は、短い文字は上の方によってしまいます。
![現状](42c1aeef9a85bd2bdfc2e826e79c91dd.png)
真ん中の長い文字が真ん中寄りで統一されるようになってしまいます。
**行いたいことは、全部を縦で見て中央揃えにすることです。**
以下のように「あああ」が配置される感じです。
![実施したいイメージ](bf26b6e00bb13e34daad0b47c5c978d8.png)


回答いただければ幸いです。よろしくお願いします。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    .container{
      display: flex;
    }
    a {
      display: inline-block;
      width: 50px;
      border: 1px solid black;
      margin: auto 5px;
      height: 100px;
      padding: 50px 15px;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="container">
    <a href="#">あああ</a>
    <a href="#">あああああああああ</a>
    <a href="#">あああ</a>
  </div>
  
</body>
</html>
```

aタグで囲った文字を、flexで横並びにしたが、文字の長さがまちまちの時、中央寄りにできない。

Flexを使用すると、画像が実際のサイズより小さく表示される。
実際のサイズに画像を表示し、レスポンシブ対応させたいです。
※width="670"の画像ですが、表示ではwidth="515"ほどで表示されます。

```HTML
<section class="topAbout inner">
  <div class="topAbout_flex">
    <figure><img src="xxx.jpg" width="670" height="440" alt=""></figure>
    <div class="topContent">
      <h2>Aタイトルが入ります</h2>
      <p>ここに文章が入ります。ここに文章が入ります。</p>
      <p class="btn"><a href="">View more</a></p>
    </div>
  </div>
</section>

```

```CSS
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.inner {
	max-width: 1200px;
	margin: 0 auto;	
}

.topAbout_flex {
  display: flex;
}

figure {
  width: 100%;
  height: auto;
}

```
### 試したこと
```CSS
figure {
  flex-shrink: 0;
}
```
flex-shrink: 0;を指定すると画像は実際のサイズになりますが、レスポンシブ対応にならない。