5

カードを並べて表示するために、クロスブラウザのフレックスボックスレイアウトを作成しようとしています。すべてのカードに十分なスペースがある場合は、左または右に配置する必要があります (「左」および「右」のクラスによって決定されます) が、ない場合は縮小します。縮小する場合、カードの上にマウスを置くと縮小が少なくなり、より多くのカードを表示できます。

これについて多くのことを話しました。必要に応じて、ここでライブデモを行ってください。

CSS:

img{
   width:90px;
    position: absolute;
}

.cards{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: flex-start;
    -ms-flex-direction: row;
    -ms-justify-content: flex-start;
    flex-direction: row;
    justify-content: flex-start;
}
.cards.right{
    float: right;
    -webkit-flex-direction: row-reverse;
    -webkit-justify-content: flex-end;
    -ms-flex-direction: row-reverse;
    -ms-justify-content: flex-end;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.cards div{
    position:relative;
    -webkit-flex: 0 2 90px;
    -ms-flex: 0 2 90px;
    flex: 0 2 90px;
    -webkit-box-flex: 0 2 90px;
    transition: flex-shrink .3s;
    transition: flex-shrink .3s, -webkit-flex .3s;
    -webkit-transition: -webkit-flex .3s;
}
.cards.left div:last-child, .cards.right div:first-child{
    -webkit-flex: 0 0 90px;
    -ms-flex: 0 0 90px;
    flex: 0 0 90px;
    -webkit-box-flex: 0 0 90px;
}
.cards.left div:not(:last-child):hover, .cards.right div:hover+div{
    -webkit-flex: 0 1 90px;
    -ms-flex: 0 1 90px;
    flex: 0 1 90px;
    -webkit-box-flex: 0 1 90px;
}

これまでのところ、IE、FF、Chorme、および Opera の最新バージョンで目的のレイアウトを作成することに成功しています。
ただし、Safari で問題が発生しています。それらのレイアウトは、拡大と縮小にさまざまな柔軟性を指定できるかどうかに依存しますが、私が知る限り、Safari はこれをサポートしていません。

Safari でのフレックスボックスの拡大と縮小に関するヘルプは大歓迎です。IE と FF では壊れやすいため、古いテーブルベースのレイアウトにフォールバックしたくありません。

4

1 に答える 1

8

私がアクセスできる Safari は Windows 用のバージョン 5 だけなので、それより新しいバージョンでこれがどのように機能するかは確認できません。

flex-shrink と flex-grow が独立した値としてサポートされていないことについて、あなたにできることは何もありません。私のアドバイスは、この目的で flex-shrink を使用するのではなく、代わりにパディングを使用することです。この特定の例ではほぼ同じ効果が得られ、Safari 5 でも機能します。

http://codepen.io/cimmanon/pen/oHzgr

img {
  width: 90px;
  position: absolute;
}

.cards {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -webkit-flex-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.cards.right {
  float: right;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -webkit-flex-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.cards div {
  position: relative;
  max-width: 90px;
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -webkit-flex: 0 2 90px;
  -ms-flex: 0 2 90px;
  flex: 0 2 90px;
  -webkit-transition: -webkit-flex .3s;
  transition: flex-shrink .3s;
  transition: flex-shrink .3s, -webkit-flex .3s;
}

.cards.left div:last-child, .cards.right div:first-child {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 0 90px;
  -ms-flex: 0 0 90px;
  flex: 0 0 90px;
}

.cards.left div:not(:last-child):hover, .cards.right div:hover + div {
  padding-right: 5%;
}

もちろん、トランジションをパディングに変更する必要がありますが、それ以外の場合は機能しているように見えます。

于 2013-04-21T12:53:00.017 に答える