flexbox

问题 I have a simple flexbox layout like this html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; align-items: flex-start; margin-bottom:30px; display:flex; justify-content:space-between; } #section-163 { width:calc(61.8034% - ( 0.38196600790794 * 30px ) ); align-self:auto; } #section-260 { width:calc(38.1966% - ( 0.61803399209206 * 30px ) ); align-self:auto; } .myimage { object-fit:cover; width:100%; height:100%; } <div class="panel

问题 I want to use flexbox for an app, and want all elements to be set do display: flex. Is that possible? if yes, how? I have alread set body { display: flex }, but it still does not apply to all body elements. 回答1: (I took my comments and turned them into an answer) The universal selector would do the trick: body * { display: flex; } (Note that I've scoped it to only include elements within the body ) The universal selector can lead to (negligible, tiny, almost immeasurable) performance issues,

问题 I'm trying to build a pricing table where each column contains a card. I want all cards to stretch to the height of their parent (.col) elements. Note: I'm using Bootstrap 4, and trying to achieve this with the existing grid system (for the sake of consistency) and with this particular piece of markup . I can't get the cards to grow to the height of their parent containers. Is this even possible with the current markup? The basic markup is this: <div class="row"> <div class="col"> <div class=

问题 I am trying to float DIVs vertically from top to bottom and from left to right in a fixed height container. Vetically floating DIV arrange from up to down by rows raises the same issue and a solution has been given in the cases where divs have the size height:width as 1:1. In my cases each div is a long rectangle and as expected the solution explained in the above post breaks. I was able to find another solution using a new css property called flex columns.The below given style does the job

问题 I am trying to float DIVs vertically from top to bottom and from left to right in a fixed height container. Vetically floating DIV arrange from up to down by rows raises the same issue and a solution has been given in the cases where divs have the size height:width as 1:1. In my cases each div is a long rectangle and as expected the solution explained in the above post breaks. I was able to find another solution using a new css property called flex columns.The below given style does the job

问题 Prompt Suppose we want to distribute a row of inline-block elements inside a div of flexible width, we consider the spaces on the far end of the first and last elements to be significant and should be part of the spacing. Mark-up <div id="whole-thing"> <!-- inline-block element, width shrinks to widest row --> <div id="row1" class="row"> <!-- block element (100% width) --> <div id="box1" class="box"> <div id="box2" class="box"> .. </div> <div id="row2" class="row"> .. </div> .. </div> Picture

问题 Everything works fine in Chrome and Firefox but guess what, I have a problem in IE! (IE11) In my responsive layout I want to menu to be horizontal in pc mode and vertical in tablet/mobile mode. It does just that, but in IE the menu items have no height. They all collapse to 0 height if inspected with the developer tool. I can't find why. Anyone would have an idea? I made a codepen for it: http://codepen.io/Reblutus/pen/qjacv Here is the code <style> header { background: cyan;} nav {

问题 Is their an simple way in CSS to have a fixed maximum of child items on the same line, before you push the next child elements to a new line? As i understand flexbox, child items only get pushed to a new line if their isint enough available space on the line above it. But i am seeking a CSS rule or function that let me say " i want a maximum of 3 child items on any given line, and even if space is available for a 4'th one push it to a new line ". 回答1: Instead of using display: flex you could

问题 I'm trying to get a very simple layout using the flex model working on iPad. I have a containing div that is supposed to center the content divs. The sample code does as intended across all browsers and platforms EXCEPT on the iPad (retina). Using various iPad emulators online will not replicate the problem. I've only been able to replicate it on the actual iPad. Here's a screenshot of what it looks like: Any and all advice will be appreciated very much. CSS: .container { width: 510px; height

问题 This question already has answers here : input / button elements not shrinking in a flex container (2 answers) Why don't flex items shrink past content size? (1 answer) Closed 2 years ago . Somewhy inputs do not perceive flex-basis correctly. Here is a simplest example illustrating how inputs do not obey and span outside of their parent block (see jsfiddle): <div> <input> <input> </div> <style> div { display: flex; width: 200px; border: 2px solid red; } input { flex-basis: 50%; } </style>