-1

私は今、ウェブアプリに取り組んでいます。Internet Explorer 用に Web サイトを最適化することを除いて、HTMl / CSS は私にとって大きな問題ではありませんでした:) 私はアプリでほとんど作業を終えました。だからこそ、私はあなたに助けを求めています：

2 つのレイアウト (添付の画面) は新しい flexbox を使用して実行できると思いますが、以前はそれを使用したことがなく、仕様が非常に多く (2009、2011、2012 など) あるため、どこを使用すればよいかわかりません。始める。最初の質問は一般的なものです: これらの 2 つのレイアウトは一般的にフレックスボックスまたは HTML / CSS で可能ですか?

レイアウト 1 レイアウト 2

概念を理解するのに十分かどうかはわかりませんが、可能な限り説明しようとしました。何でもお気軽にお尋ねください。どちらのレイアウトもほぼ同じなので、一方が可能であれば、もう一方も何らかの方法で実行できるはずです。

これらの 2 つのレイアウトをプログラムする方法について、簡単で大まかなコード サンプルを教えてくれる人はいますか? 私自身が (このフレックスボックスに取り掛かるために) コードを少し (コメントなどで) 説明するのは素晴らしいことです。私にとっては、少なくとも何らかの出発点があると本当に助かります。なぜなら、現時点では何日も立ち往生しているだけだからです。

前もって感謝します ：）

4

2 に答える 2

2

はい、できます！ここに大きなチュートリアルがあります

あなたの最初の願い:

実際の例

HTML 

<div class="parent">
    <div class="purple">
    </div>
    <div class="green">
        big<br>
        test<br>
        content<br>
        very<br>
        big<br>
    </div>
</div>

CSS

html、本文{
  高さ: 100%;
}

。親{
  ディスプレイ: -webkit-box; /* OLD: Safari、iOS、Android ブラウザー、古い WebKit ブラウザー。*/
  表示: -moz-box; /* 古い: Firefox (バグ) */
  表示: -ms-flexbox; /* ミッド: IE 10 */
  表示: -webkit-flex; /* 新機能、Chrome 21+ */
  表示: フレックス; /* 新規: Opera 12.1、Firefox 22+ */

  -webkit-flex-flow: 列;
  -moz-flex-flow: 列;
  -ms-flex-flow: 列;
  -o-flex-flow: 列;
  フレックスフロー: 列;
  高さ: 100%;
}
。紫の{
  ディスプレイ: -webkit-box; 表示: -moz-box;
  表示: -ms-flexbox;
  表示: -webkit-flex;
  表示: フレックス;

  -moz-box-flex: 自動;
  -webkit-box-flex: 自動;
  -webkit-flex: 自動;
  -ms-flex: 自動;
  フレックス: 自動;
  背景: 紫;
}
。緑 {
  ディスプレイ: -webkit-box; 表示: -moz-box;
  表示: -ms-flexbox;
  表示: -webkit-flex;
   表示: フレックス;

  フレックス方向: 列;
  背景: 緑;
}
于 2013-05-27T19:43:30.420 に答える