常連

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列　折返しの件

### 実現したいこと
横並びのボックス３つについて

真ん中の要素だけ下記のように指定したとします。
flex-shrink: 0;

画面横幅を狭めると両サイドの要素だけ縮むと思います。

この時、両サイドの要素について、最低幅以上は縮まらないように指定するようなことはできませんか？




### 発生している問題・分からないこと
質問と同じ内容です。



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

```
特になし
```

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

##### 上記の詳細・結果
真ん中のbox要素にmin-widthを設定しましたがうまくいきませんでした。


### 補足
特になし

flexboxのshinkについて、指定した幅以上はshrinkしないようにする方法について

簡単そうですができないので、質問させて下さい。

下記のようなコードを書いているのですが、題に記載通り、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;を指定すると画像は実際のサイズになりますが、レスポンシブ対応にならない。