flexbox

2熱

1答えて

要素のスタイルを変更して、このように見せています。（正方形の要素はすべて同じサイズでなければなりません）しかし、何が起こって終わることはこれです：これは、コンテナと要素のための私のCSSコードです： .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-cont

-2熱

2答えて

歪んだフレックスボックスを修正しました

私は歪んだCSSデザインのウェブサイトを行う必要があります。目標は、いくつかの類似した設計である：と、いくつかの符号化後の私の結果は以下の通りです：ABCコンテナを右の位置にアレント：あなたが問題を見ることができるブラックボックスで。どのように私はそれを修正することができますか？ html, body { margin: 0px; padding: 0px;

0熱

1答えて

sibbling要素にflexboxのプロパティと同じ "padding"を与えます。justify-content：space-around

タイトルを殺害して申し訳ありません。しかし、私の問題を要約する方法がわからない。フッター内のテキストに、私のリストと同じパディング（正確には下になるように）をしたいとします。これは可能ですか？フィドル：https://jsfiddle.net/dyLnbr4a/ HTML： <section> <article> <ul> <li> bla

4熱

1答えて

フレックスカラムは、ラップされたときにのみ中心になります。

フレックスボックスを使用してリストアイテムを列に表示しています。アイテムは、特定の高さの後に列を追加し、列を水平に中央に配置し、各列のリストアイテムを左揃えにする必要があります。私はmax-heightを使用してリストの高さを制限し、flex-flow: column wrapはラッピングカラムを作成し、align-content: centerはカラムを中央に配置します。私はmulti-col

1熱

1答えて

自動サイズのフレックスボックスレイアウトにCSSトランジションまたはJavascriptアニメーションを追加する

.expandsを使用して、.expandedの自動サイズのフレックスボックスエレメントの子クラスを.hiddenのように切り替えることを試しています。ような何か： const expandClick = e => { e.currentTarget.querySelectorAll('.expanded').forEach(child => { child.classLis

0熱

2答えて

tailwind cssでビューポートの高さを塗る方法

私はTailwind CSSを試していますが、ビューポートの高さをどのように埋めるかを知りたいと思っています。ドキュメントからこの例でHTMLを取る <div class="flex items-stretch bg-grey-lighter"> <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2

0熱

1答えて

Flex Cssを使用したナビゲーションバーのアライメントの固定

ナビゲーションバーのコンテンツの位置合わせを修正しようとしています。私は最初にナビゲーションバーをモバイル対応にしました。 .sidebar{ position: fixed; top:0; left:-300px; width: 300px; height: 100vh; background: #262626; transi

2熱

1答えて

フレックスコンテナの幅を子供の幅に縮小する方法を教えてください。

私は最終的には中央揃えのグリッドを作成しようとしていますが、アイテムは左揃えで上揃えになっています。ここでは、再生です： http://jsfiddle.net/Ae8Wv/1306/ 私はtext-align: centerかdisplay: flex; justify-content: center;のいずれかで、1つの親コンテナを作成し、スタイルdisplay: flex; justify

0熱

1答えて

フレックスボックスを使用した垂直ナビ

フレックスボックスを使用してウェブサイトを作成しようとしています。ナビゲーションメニューを作成しているときに、大きな画面で水平に表示されるにもかかわらず、ナビゲーションリンクが小さい画面に垂直に表示されないという問題に直面しています。あなたは私に何が足りないのかを教えてください。参考までに私のCSS JSとHTMLがあります。 <body> <nav> <div id="brand">

3熱

3答えて

フレックスボックス内の1つのアイテムだけの場合の中心

フレックスボックスで制御されたフッターがあります。 1,2または3の下位divを含むことができます。 2つのまたは3 のdivで .footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } <div class=