27393


Flexboxで`justify-content`や`align-
items`を使うと簡単に中の要素を中央揃えさせることができますが、画面サイズによって、要素の大きさが変わってしまいます

これを固定することはできますか?

flexboxを要素を簡単に中央揃えできるbox(画面サイズによって伸び縮みしてほしくない)として使いたいのですがどうすればいいのでしょうか?

`width`や`height`を使っても上手くいきませんでした


CC BY-SA 3.0
2016-07-06T11:12:31.150
27386
2016-07-06T15:59:52.367
2016-07-06T15:58:10.033
3054
5246
question
html css
Flexboxの要素の大きさを画面サイズによらず固定したい

[code]

    flex-grow: 0;
    flex-shrink: 0;
    
[/code]

とすると画面幅によらず、`width`に従います。(高さに関しては未検証です。)

`width`でなく[`flex-basis`](https://developer.mozilla.org/ja/docs/Web/CSS/flex-
basis)を使うのならば[`flexショートハンド`](https://developer.mozilla.org/ja/docs/Web/CSS/flex)を使って、

[code]

    flex: 0 0 10em;
    
[/code]

の様に指定する事も出来ます。

[code]

    div{
      border-style: solid;
    }
    .box{
      display: flex;
      justify-content: center;
      border-color: blue;
    }
    .item-by-width{
      width: 10em;
      flex-grow: 0;
      flex-shrink: 0; 
      border-color: orange;
    }
    .item-by-basis{
      flex-basis: 10em;
      flex-grow: 0;
      flex-shrink: 0; 
      border-color: orange;
    }
[/code]

[code]

    <div class="box">
      <div class="item-by-width">アイテム(width)</div>
    </div>
    
    <div class="box">
      <div class="item-by-basis">アイテム(basis)</div>
    </div>
[/code]


CC BY-SA 3.0
2016-07-06T15:54:40.887
27393
2016-07-06T15:59:52.367
2016-07-06T15:59:52.367
3054
3054
27386
answer