flexbox

问题 In a flex container I have 5 items with a column direction but in a certain width I want to display 3 per column and force the others to wrap is there any way to do that without fixed height ? my code : <div class="container"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> </div> .container { display: flex; flex-flow: column wrap; } @media (min-width:

问题 Given an arbitary number of flexbox children with an inline order attribute used for sorting, how would one select the last ordered element in CSS? <ul style="display:flex"> <li style="order: 4">a</li> <li style="order: 5">b</li> <li style="order: 3">c</li> <li style="order: 1">d</li> <li style="order: 2">e</li> </ul> :last-of-type doesn't work on flex children, and the list can be any length, so selecting by order index isn't an option. I'm not interested in JavaScript solutions. 回答1: The

问题 We have a div element with lots of sub elements and this is not displaying correctly in latest Chrome (79) on Mac. We are getting two scrollbars and it looks like the list is taking up too much space and forcing the titlePanel and actionPanel out of the viewport. See screenshots. We want the UI to take up the full height of the browser window, and we want the list element to take up remaining space and have a scrollbar inside it. Correct: Not correct (notice the two blue panels and the two

问题 I'm using flex to create a multi column list that adjusts the number of columns based on the width of the container. The problem I found is that if I want to use the full width of the parent by setting flex-grow to 1, the items in the last wrapped row are misaligned, since they try to fill the parent. I found two workarounds that don't work for me: one used media queries, which I can't use because the parent is not the same width of the viewport; the other was using columns , but I can't use

问题 I have been searching and searching for about 3 hours now because I didn't want to have to ask, but how can I keep a 'footer' variable at the bottom but not like fixed at the bottom, so if the content I have is very small it won't just sit halfway in the page but if I have lots of information it won't lock right at the bottom of the page and sit there over data while you scroll I have tried several ways including this: https://david-kerwick.github.io/2017/01/14/material-2-flex-layout-making-a

问题 I am trying to learn flexbox and I really like it. I am trying play with dynamic widths and when I do it with divs it works. If I try to do it with li, it does not work as well. My code is up on codepen. div.example ul li | 1 li | 2 li | 3 li | 4 li | 5 li | 6 div.container div.col | 1 div.col | 2 div.col | 3 div.col | 4 div.col | 5 div.col | 6 SASS Code .container { border: 1px solid #000; display: flex; flex-direction: row; flex-wrap: wrap; width: 50%; .col { width: calc(100% / 3); height:

问题 This question already has answers here : Can't scroll to top of flex item that is overflowing container (7 answers) Closed 3 years ago . HTML: <div id="container"> <div class="item">Foo</div> <div class="item">Bar</div> </div> CSS: #container { display: flex; justify-content: center; overflow: auto; } .item { flex-grow: 1; min-width: 200px; max-width: 300px; } When the above container shrinks to less than 400px, a horizontal scroll bar appears as expected. However, the first item becomes

问题 I have two elements inside a container, which are being side-by-side by using flex box. On the second element ( .flexbox-2 ), I am setting it's height in the CSS. However, then the first element ( .flexbox-1 ) will match the height of .flexbox-2 . How would I stop .flexbox-1 from matching the height of .flexbox-2 , and instead just retain its natural height? Here is what I have so far (also available as a jsFiddle) .container { display: -webkit-flex; -webkit-flex-direction: row; } .flexbox-1

问题 I'm working to create a TextArea that is horizontally and vertically centered in the page. Given that I need the TextArea to be vertically centered, I can't have the textarea be 100w and 100h, I need it to start with a small height and then grow as the user types. I also need a click capturer so if the user clicks the area surrounding the textarea, the textarea focuses. (the gray bkg is just for debugging purposes) I have a demo on CodePen here: https://codepen.io/anon/pen/OQbvxa autosize

问题 I've built a nested flexbox grid that I'll be using for individual gateways. Currently, presumably due to the use of outline , the content within each container is running over into (and being hidden by) the whitespace surrounding each gateway, which acts as spacing between each div. Is there a better way to handle the grid spacing, which allows me to ensure the content doesn't run over into the div outline? I've included a JSFiddle to illustrates the issue (seen best in the secondary &