flexbox | 易学教程

Use flexbox order to order item between DOM-ordered items

阅读更多关于 Use flexbox order to order item between DOM-ordered items

问题 Is it possible to use order: 2 and have that flex item be positioned in order without setting order on the other items? div elements without order are shown in DOM order, however the following won't move the order: 2 element in between the DOM-ordered elements because the elements don't have an order specified. div.flex-container { display: flex; } div.flex-container div { flex-basis: 10px; } div.order-2 { order: 2; -webkit-order: 2; } <div class="flex-container"> <div>a</div> <div>b</div>

How can I apply CSS to flex items on a certain row, or to flex items that have been wrapped?

阅读更多关于 How can I apply CSS to flex items on a certain row, or to flex items that have been wrapped?

问题 I have a flex div that contains five green boxes. The flex div is using flex-wrap: wrap; to wrap the objects inside when needed. I want all of the wrapped items to have an orange border: And I want all wrapped items on the third row to be yellow instead of green. 回答1: AFAIK there is no way to select elements depending on which line of their containing block they are placed. So it may not be possible to do this directly. However, you can fake the borders: #outer { display: flex; flex-wrap:

Is there a way to shrink an element with set height?

阅读更多关于 Is there a way to shrink an element with set height?

问题 So I didn't really know what question to ask but hear me out. I was trying to make a div wrapper(it has a bisque background in the pictures) that would work like so: One list overflowing Both lists overflowing Now, the layout above uses a fixed height to divide the wrapper using grid. So if I remove some items this is what I get. Is there a way to shrink the wrapper to its content even though it has a fixed height? Or is it possible to archive the same result without setting the height? Also,

Flexbox in responsive table layout: Column not stretching to full height

阅读更多关于 Flexbox in responsive table layout: Column not stretching to full height

问题 I am using flexbox to create a responsive table. I'd like to achieve the following layout: Mobile: X | 1 | 2 | A | | | B | | | C | | | Desktop: X | A | B | C | 1 | | | | 2 | | | | To this end I have created multiple flexboxes, one as a parent to the entire business and one for each row on the mobile layout. I have then used breakpoints and flex-direction: row/column , which appears to work pretty well save for one issue: On the Desktop variant, the X | 1 | 2 column (see style tickets__row )

Flexbox in responsive table layout: Column not stretching to full height

阅读更多关于 Flexbox in responsive table layout: Column not stretching to full height

vertical align and CSS grid relationship

阅读更多关于 vertical align and CSS grid relationship

问题 How do vertical align and CSS grid work together? I have an element that is next to elements that need to be aligned exactly in the middle. See below: .alphabet { font-size: 80px; /*Below is not working...why?*/ vertical-align: middle; } .letter-grid { display: flex; } .filter-item-grid { display: grid; display: -ms-grid; grid-template-columns: auto auto; justify-content: space-between; align-content: space-between; } .letter-grid__filter-item { display: grid; display: -ms-grid; grid-template

The unpredictable wrapping habits of CSS

阅读更多关于 The unpredictable wrapping habits of CSS

问题 I got this simple setup with 3 elements in a flex-box. They are justified space-between. The middle .center element is set width 100%. For some reason the children elements (links) wrap, no matter how wide the window is. What is the mechanism behind the result being that the links are being wrapped to the next line? There is enough space. Why isn't the .center div taking 100% of the left over space so they don't wrap. And how do I prevent this wrapping? PS: I want the .center div to take 100%

Nesting flexbox inside flexbox overflow. How to fix this?

阅读更多关于 Nesting flexbox inside flexbox overflow. How to fix this?

问题 So I was trying to get a header and some content to fit into the screen by having a div #main with height: 100% as a flexbox, just like this: #main { height: 150px; /* Using a fixed height here, otherwise the snippet wouldn't work */ } .flexbox { display: flex; flex-direction: column; } .header { flex: 0 1 auto; border: 2px solid #aa0000; } .content { flex: 1 1 auto; border: 2px solid #00aa00; } .scrollable { overflow-y: scroll; } <html> <body> <div id="main" class="flexbox"> <div class=

Responsive height layout with dynamic height elements

阅读更多关于 Responsive height layout with dynamic height elements

问题 I am trying to build a layout with a menubar and a main container that includes a searchbar, left sidebar, and a results table. I want the main container to always be as tall as possible for the window and the left sidebar and results table to also be as tall as possible within the main container. This is how this would look with fixed heights on everything: https://jsfiddle.net/m45cakne/1/ <div class="menubar"></div> <div class="main-section"> <div class="searchbar"> </div> <div class=

How to use nested flexboxes with Angular components?

阅读更多关于 How to use nested flexboxes with Angular components?

问题 I want to make all components added in through the router-outlet take up all of the available height and width of the page using flexboxes. Thanks to ToolmakerSteve's answer to the "how to make nested flexboxes work", I know that it is possible to achieve the desired results using the following basic HTML and CSS: HTML: <div id="flexbox-outer"> <div id="flexbox-middle"> <div id="flexbox-inner"> </div> </div> </div> CSS: html, body { height : 100%; width : 100%; } .flexbox-outer { display :