常連

### 実現したいこと
画像のような構成のウェブをflexやgridを用いてイメージしたい。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-05-22/1deabf72-81d1-4626-ae2b-209d3e82ec53.png)


### 前提
作ってあるhtml要素以外、新規のブロック追加・変更・削除はしないこと
cssはプロパティの変更・追加は問題ないが、セレクタ自体の変更・削除・追加は行わないこと
セレクタは必要に応じて、id、classは追加しても問題ありません。

### 発生している問題・エラーメッセージ
下記のように現在コードを入力していますが、全くなりません。
```
エラーメッセージ
```

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>flexbox応用</title>
    <link rel="stylesheet" type="text/css" href="base.css">
</head>
<body>
    <header>
        <h1>ヘッダー</h1>
    </header>

    <main>
        <nav class="top-content">
            <a href="#">TOP</a> &gt;
            <a href="#">パンくず１</a> &gt;
            <a href="#">パンくず２</a>
        </nav>

        <div class="left-content">
            <p>left-content</p>
            <ul>
                <li>カラムメニュー１</li>
                <li>カラムメニュー２</li>
                <li>カラムメニュー３</li>
                <li>カラムメニュー４</li>
                <li>カラムメニュー５</li>
                <li>カラムメニュー６</li>
                <li>カラムメニュー７</li>
            </ul>
        </div>

        <div class="right-content">
            <p>right-content</p>
            <div class="box-container">
                <div class="content-block">
                    <p>box1</p>
                </div>
                <div class="content-block">
                    <p>box2</p>
                </div>
                <div class="content-block">
                    <p>box3</p>
                </div>
                <div class="content-block">
                    <p>box4</p>
                </div>
                <div class="content-block">
                    <p>box5</p>
                </div>
                <div class="content-block">
                    <p>box6</p>
                </div>
                <div class="content-block">
                    <p>box7</p>
                </div>
                <div class="content-block">
                    <p>box8</p>
                </div>
                <div class="content-block">
                    <p>box9</p>
                </div>
            </div>
        </div>

        <div class="bottom-content">
            <p>bottom-content</p>
        </div>
    </main>

    <footer>
        <p>フッター</p>
        <div class="footer-container">
            <div class="footer-left">
                <p>左テキスト</p>
            </div>

            <div class="footer-right">
                <p>右テキスト</p>
                <p>右テキスト</p>
                <p>右テキスト</p>
            </div>
        </div>
    </footer>
</body>
</html>

```

```css
header {
	height: 120px;
	background-color: #efe;
	border-bottom: 1px solid #ccc;
}

main {
}

.top-content {
}
.top-content a {
	font-size: 11px;
}

.left-content {
	background-color: #eef;
	border: 1px solid #ccc;
	display:grid;
	grid-template-rows: 10px,10px,10px,10px,10px,10px,10px;
	grid-template-columns:10px;
	grid-gap:1px;
}
.left-content ul {
}

.right-content {
	background-color: #fee;
	border: 1px solid #ccc;
}
.box-container {
}
.content-block {
	background-color: #eee;
	border: 1px solid #ccc;
}
.box-red {
	background-color: #f99;
}

.bottom-content {
	width: 100%;
	height: 120px;
	background-color: #eff;
	border: 1px solid #ccc;
}

footer {
	height: 180px;
	background-color: #eee;
	border-top: 1px solid #ccc;
}
.footer-container {
}
.footer-left {
	width: 15%;
	background-color: #fef;
	border: 1px solid #ccc;
	padding: 10px;
}
.footer-right {
	width: 35%;
	background-color: #ffe;
	border: 1px solid #ccc;
	padding: 10px;
}
.text-rihgt {
	text-align: right;
}
```

### 試したこと

gridおよびflexを学び直して、親要素を意識してコードを入力したりした。
### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

html  css  grid   flex  justify-content

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 ボタンを縦並びにしたい（ボタンの大きさは文字幅に応じたままで）

こんにちは。

よくある質問で、申し訳ありません。

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が崩れる

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

eclipseでのデバッグ(flex)

###前提・実現したいこと
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を使用すると、画像が実際のサイズより小さく表示される。
実際のサイズに画像を表示し、レスポンシブ対応させたいです。
※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;を指定すると画像は実際のサイズになりますが、レスポンシブ対応にならない。

FlexBoxを使用したとき画像が小さくなる

簡単そうですができないので、質問させて下さい。

下記のようなコードを書いているのですが、題に記載通り、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>
```