タグ付けされた質問 「flexbox」

コンテナmargin: 0 5px上.itemとmargin: 0 -5pxコンテナ上で使用しているフレックスボックスアイテム間の最小距離を設定するには 私にとってはハックのように見えますが、これを行うためのより良い方法を見つけることができません。 例 #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; margin: 0 5px; } <div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> コードスニペットを実行する結果を非表示スニペットを展開

781 css  flexbox 

「連絡先」を右揃えにするよりフレックスボックス風の方法はありますposition: absoluteか？ .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> …

680 html  css  flexbox 

フレックスコンテナーの主軸と交差軸を考えます。 出典：W3C 主軸に沿ってフレックスアイテムを配置するには、1つのプロパティがあります。 justify-content クロス軸に沿ってフレックスアイテムを配置するには、3つのプロパティがあります。 align-content align-items align-self 上の画像では、主軸は水平で、交差軸は垂直です。これらは、フレックスコンテナのデフォルトの方向です。 ただし、これらの方向はflex-direction宿泊施設と簡単に交換できます。 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; （交差軸は常に主軸に対して垂直です。） 軸の働きを説明する上での私のポイントは、どちらの方向にも特別なものは何もないように見えることです。主軸、交差軸、重要度の点で同じであり、flex-direction簡単に前後に切り替えることができます。 では、なぜ交差軸は2つの追加の配置プロパティを取得するのですか？ なぜされているalign-contentとalign-items主軸のために一つの特性に統合？ 主軸がjustify-selfプロパティを取得しないのはなぜですか？ これらのプロパティが役立つシナリオ： フレックスコンテナーの隅にフレックスアイテムを配置する #box3 { align-self: flex-end; justify-self: …

675 css  flexbox  language-lawyer  w3c 

フレックスボックスを使用して、divをコンテナ内で水平方向および垂直方向の中央に配置する方法。以下の例では、水平方向の中央に配置された各行の下（行）に各数値が必要です。 .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> …

669 html  css  flexbox 

フレックスボックス内のフレックスアイテムの垂直方向のスペースを埋めようとしています。 .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> <div class="flex-1"></div> <div class="flex-2"> <div class="flex-2-child"></div> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 そして、これがJSFiddleです flex-2-child …

459 css  flexbox 

2つのdivが並んでいます。それらの高さを同じにして、そのうちの1つがサイズ変更しても同じままにしたいです。私はこれを理解することはできません。アイデア？ 混乱を招く質問を明確にするために、両方のボックスを常に同じサイズにしたいので、テキストが配置されたために1つが大きくなった場合、もう1つは高さに合わせて大きくする必要があります。 <div style="overflow: hidden"> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> </div> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content! </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

441 html  css  html-table  flexbox 

flexboxを使用して一部のコンテンツを垂直方向に整列させたいのですが、うまくいき<li>ません。 オンラインで確認しましたが、多くのチュートリアルでは、実際align-items:centerには親のフレックス設定から取得するラッパーdivを使用していますが、この追加の要素を切り取ることはできないのでしょうか。 リストアイテムの高さが動的になるため、このインスタンスではflexboxを使用することにしました%。 * { padding: 0; margin: 0; } html, body { height: 100%; } ul { height: 100%; } li { display: flex; justify-content: center; align-self: center; background: silver; width: 100%; height: 20%; } <ul> <li>This is the text</li> </ul> コードスニペットを実行する結果を非表示スニペットを展開

424 html  css  flexbox 

次のように、コンテナーdiv内に3つのdivを配置したいと思います。 [[LEFT] [CENTER] [RIGHT]] コンテナーdivは100％幅（設定された幅なし）であり、コンテナーのサイズを変更した後、中央のdivは中央にとどまる必要があります。 だから私は設定しました： #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} しかし、次のようになります。 [[LEFT] [CENTER] ] [RIGHT] 任意のヒント？

392 html  css  flexbox  alignment  css-float 

私は次のようなコンテナを備えたシンプルなフレックスボックスのレイアウトを持っています： .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } 次に、最後の行のアイテムを他のアイテムと揃えます。 justify-content: space-between;グリッドの幅と高さを調整できるため、使用する必要があります。 現在のように見えます ここでは、右下のアイテムを「中央の列」に入れたいと思います。それを達成する最も簡単な方法は何ですか？これは、この動作を示す小さなjsfiddleです。 .exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: 1px 1px 2px …

378 css  flexbox  grid-layout 

私にはdiv何人かの子供がいます： <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> 次のレイアウトが必要です： ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | ------------------- テキストの量に関係なく、フローから取り出さずに常に下部pに貼り付けたいです.button。これはFlexboxで達成できると聞いていますが、機能させることができません。

375 html  css  flexbox 

最大5アイテム、最小3アイテムのフレックスボックスナビゲーションを試みますが、すべての要素間で幅を均等に分割していません。 フィドル 私がこれからモデリングしているチュートリアルはhttp://www.sitepoint.com/sensitive-fluid-width-variable-item-navigation-css/です。 SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 0 0 6.5rem; display: table; table-layout: fixed; } .tabs ul { margin: 0; display: flex; flex-direction: row; } .tabs ul li { flex-grow: 1; list-style: none; text-align: …

368 html  css  flexbox 

align-itemsとの違いを誰かに教えてもらえalign-contentますか？

366 css  layout  flexbox  alignment 

ナビゲーションバーのアイテムを右に揃えるにはどうすればよいですか？ ログインして右に登録したいのですが。しかし、私が試みたすべてが機能していないようです。 これは私がこれまでに試したことです： <div>周辺の<ul>属性：style="float: right" <div>周辺の<ul>属性：style="text-align: right" <li>タグでこれら2つのことを試しました !important最後に追加してそれらすべてをもう一度試しました に変更さnav-itemれnav-rightました<li> にpull-sm-rightクラスを追加しました<li> にalign-content-endクラスを追加しました<li> これは私のコードです： <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> …

340 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

IDラッパー内の要素を垂直方向に揃えようとしています。display:inline-flex;IDラッパーはフレックスコンテナーであるため、このIDにプロパティを指定しました。 しかし、プレゼンテーションに違いはありません。ラッパーIDのすべてが表示されることを期待していましたinline。なぜでしょうか？ #wrapper { display: inline-flex; /*no difference to display:flex; */ } <body> <div id="wrapper"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> <footer>footer</footer> </div> </body> コードスニペットを実行する結果を非表示スニペットを展開

331 css  flexbox 

ブートストラップ4を使用して、ページの中央にコンテナーを配置しようとしています。これまでのところ、うまくいきませんでした。任意の助けいただければ幸いです。 私はそれをCodepen.ioで構築したので、皆さんはそれを試してみて、アイデアから私が何をしているのかを教えてください... コードスニペットを表示 var currentAuthor = ""; var currentQuote = ""; function randomQuote() { $.ajax({ url: "https://api.forismatic.com/api/1.0/?", dataType: "jsonp", data: "method=getQuote&format=jsonp&lang=en&jsonp=?", success: function( response ) { $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>'); $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>'); currentAuthor = …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4