問題タブ [flexbox]

jQuery/js のプロ向けの例を次に示します。

コードの一部に一貫性のない動作があるため、このプロジェクトはまだ完了していません。それを書いた直後に、あなたの一人が「コードに一貫性のない動作はなく、望ましくない動作しかない」と言うのを聞きました。

セットアップに関する注意事項:

• Web アプリでのレコードの編集
• .change() を使用してスクリプトを開始します。
• フィールドの初期値は、js を介して行われた変更と比較されます。
• 比較では、新しい値が、1) 元の値と同じか、2) リストの既存の値であるか、3) リストに含まれていない新しい値であるかがチェックされます。
• jQuery FlexBox を使用して、入力フィールドで Google の提案のような動作を作成します (入力時に一致する可能性のあるものがボックスに表示されますが、強制されることはありません)。

望ましい動作:

• ユーザーは、1) 完全な値を入力してフィールドを離れる、2) 値の一部を入力してからタブを押して提案された値を選択する、または 3) 値の一部を入力してからボックスからの推奨値。
• ロジックは、これらのイベントのいずれかの後に実行されます。

問題：

• ユーザーがボックスから提案された値 (上記の番号 3) をクリックすると、その値が入力に追加される前にロジックが実行されます。これは、ブラウザが入力フィールドを離れたことを検出し、.change() をトリガーしたためです。これにより、コードは空の文字列または部分的に綴られた単語を既存の値のリストと比較します。次に、ロジックは、ユーザーの選択が常にまったく新しい値であると判断します。

どうすればこの問題を克服できますか?

最近、私は HTML5/CSS3 を利用してモバイル向けに最適化された Web プラットフォームに取り組んでいます。このアプリケーションには、中央にアイコンがある 4 つの同じサイズのタイルで構成されるランディング ページがあります (その他のスタイルには、それらの間の少しのパディングや境界線の半径など)。これらのタイルは、「 display: flex; 」を使用して画面サイズに基づいてサイズ変更されます。これは明らかに、ユーザーが画面の向きを変更できるという性質によるものです。

次のマークアップを使用してこれを達成しています...

HTML

CSS

iOS または Android の Chrome モバイル (現在のバージョンではなくベータ版で動作) でこれがまったく正しく表示されないという、かなり苛立たしい問題に遭遇しました。

基本的に、CSSを書き直してまったく同じレイアウトを実現しようとしていますが、それを行う別の方法を見つけるのに苦労しています。どんな助けも大歓迎です。

.container私は柔軟width:100%です。この `.container` に 2 つの縦長の画像 (幅が異なる) を並べて収めたい

私が抱えている問題:.container私はこれが柔軟な レスポンシブレイアウトに取り組んでいます- width:100%. .portraitただし、このコンテナに2つの画像( class を持つ)を並べて配置できるようにしたいと考えています。

このサンプル画像でわかるように、2 つの.portrait画像の幅は必ずしも同じではありませんか? 高さを同じにしたいのですが、幅は動的にする必要があります (比率が同じでない場合)

これは純粋なcss（おそらくフレックスボックス）で何とか可能ですか？それとも少しJS？

コンテンツは CMS を介して動的に入力されるため、ハードコードすることはできません。

創造的または役立つアイデアはありますか?

私が取り組んでいる組み込みデバイスのChromeでこれを機能させる必要があるだけであることに注意してください。また、フロート、テーブル、インラインブロックなどに基づくソリューションは提供しないでください。私はCSSフレックスの回答にのみ関心があります。

そうは言っても、私は次のようにマークアップを持っています：

そしてCSSは：

私が達成しようとしているレイアウトは次のとおりです。

赤いボックスの高さは100％、最大幅は100pxである必要があります。青と緑のボックスを合わせた高さは100％になるはずです。-webkit-flexを使用してこれを実現する方法を誰かにアドバイスできますか？あなたは私がフレックスフローとフレックス方向で遊んでみたが役に立たなかったのを見ることができます。

コードを使用してJSBinリンクを作成しました：http：//jsbin.com/usisic/3/edit

ありがとう

フレックスボックスを使用したフルハイトアプリを使用したい。display: box;このリンクで古いフレックスボックスレイアウトモジュール（およびその他のもの）を使用して欲しいものを見つけました： CSS3フレックスボックスフルハイトアプリとオーバーフロー

これは、古いバージョンのフレックスボックスCSSプロパティのみをサポートするブラウザに適したソリューションです。

新しいフレックスボックスのプロパティを使用したい場合は、ハックとしてリストされている同じリンクの2番目のソリューションを使用してみます。コンテナを使用しheight: 0px;ます。縦スクロールを表示させます。

それは他の問題を引き起こし、解決策よりも回避策であるため、私はそれがあまり好きではありません。

基本例を使用してJSFiddleも準備しました：http：//jsfiddle.net/ch7n6/

これはフルハイトのHTMLWebサイトであり、コンテンツ要素のフレックスボックスプロパティのため、フッターは下部にあります。異なる高さをシミュレートするには、CSSコードと結果の間でバーを移動することをお勧めします。

画面が最小化されたら、中央の要素がすべてのビューポートスペースを占めるようにし、途中までドラッグします。（どちらの側の2つの要素も美的です）CSSまたはJqueryでこれを実現できる属性はありますか？

オーバーフロー時にそれらをラップし、水平方向にスクロール可能なリストになるアイテムの垂直リストを実現しようとしています。これを実現するためにフレックスボックスを使用したいと考えています。

Webkit と IE は期待どおりの出力を生成します。Firefox はそうではありません。この例を参照してください:

JSFIDDLE サンプル

Firefox の解決策を見つけるのを手伝ってください。

事前にありがとうアレックス

次の HTML があるとします。

および次の CSS (接頭辞なし):

ここにCodePenがあります。

Aでラップされている<div>ため、マージンは無視されます。

Q:フレックス ボックス モデルで (マージン)Bに対する の動作を実現するにはどうすればよいですか?A

注: div ラッパーは、複数レベルの深さになる可能性があります

ターゲティング: 最新の Chrome/Safari/iOS

ご助力ありがとうございます！

編集：@ JoséCaboのおかげで、私はこれを思いつきました：

コードペン

クロム：

サファリ：

残念ながら、@cimmanon が述べたように Safari では機能しないため、まだ助けが必要です。

このコードペンの例: http://codepen.io/DrYSG/pen/ovctn 3 つのフレックスボックスを作成しました。私が望む効果は、中央のボックスにカーソルを合わせると、サイズが大きくなることです (デモの色の変化は、ホバーについて知るのに役立ちます)。

FireFox v19 では、これはほぼ正しく動作します。しかし、アニメーションの開始幅と終了幅の選択は奇妙です。

Chrome v25 では、急速に不安定な状態の振動 (点滅) が発生しています。本当に正しくありません。

IE10 では、FireFox と同じ遷移が得られますが、スムーズな遷移はありません。

このスタックオーバーフローのトピックを注意深く読みました

csstricksのこの記事

すべてのプレフィックスを使用してレイアウトを最新のブラウザーで機能させようとしましたが、Chrome でのみ機能します。他のブラウザでは、flex アイテムは flex 値 (幅) を失いました。何が問題なのか理解できません。
私は大いに感謝し、助けとアドバイスをします！ありがとうございました！ デモ

}