flexbox

问题 Very simple, a container has to have its children stretched (as they are), but the content of the children divs has to be aligned to the bottom, same as flex-end but while maintaining the height. Any ideas about how to do that? Take a look at this pen: http://codepen.io/anon/pen/NAjRvo .container { height: 100px; background: BurlyWood; display: flex; align-items: stretch; } .item{ flex:1; margin: 4px; background: Crimson; } .item p { margin: 0; text-align: center; } <div class="container">

问题 I'm trying to vertically center some text inside a div. Sounds easy but I can't get it. Here's the code, sorry for the bad formatting and practices, it's something whipped up fast and dirty: <div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px"> <div id="first" style=" min-height:100px; min-width:200px; background-color:green"> <div style="vertical-align:middle"> first box </div> </div> <div id="second"

问题 So I designed this in CSS, the idea is to have a header and the rest as scrollable content. (there's a link to a live demo at the bottom) Alas, in Safari it is broken and looks like this: As you can see, the height of the header is miscalculated, causing the green box to overflow. I narrowed down the problem to a wrong calculation of flex-basis of the header. Or so I believe. Live demo here: http://jsbin.com/zusavefoqu Any idea how to fix it? Thanks! 回答1: You may need to add vendor prefixes.

问题 If I have the following HTML markup: <div class="wrapper"> <div id="container-1"> <div class="child-1-1"></div> <div class="child-1-2"></div> </div> <div id="container-2"> <div class="child-2-1"></div> <div class="child-2-2"></div> </div> </div> I can apply a display of flex to wrapper , and then make container-2 appear above container-1 using order . I would like the final order of the elements to be: child-2-1 child-1-1 child-1-2 child-2-2 What I basically want is for the children of the

问题 I have a container that contains three elements: one image and two divs: I want all images to be inline blocks and have specified so in their classes: .first_image { display: inline-block; height: 20px; width: 20px; } .first_div { width: 100%; display: inline-block; } .second_div { width: 52px !important; height: 40px !important; display: inline-block; background-color: #3798D4; } .container { display: inline-flex; } However, when I run and inspect, these are the actual attributes: The

问题 I'm having some difficulties with flexbox. As you can see, I have an aside element that holds an ordered list of social media icons. For some reason, I'm unable to make these icons stick to the BOTTOM on the containing div . HTML CODE <div class="outercontainer group"> <div class="dividing-row span_1_of_2 col"> <p> here is some text </p> <aside> <ol class="category-name"> <li><i class="fa fa-pinterest-p"></i></a></li> <li><i class="fa fa-flickr"></i></a></li> </ol> </aside> </div> </div> CSS

问题 This question already has answers here : Aligning grid items across the entire row/column (like flex items can) (2 answers) What are the areas covered by Flexbox which are difficult or impossible to achieve with Grid? (3 answers) Closed 9 months ago . I've started to learn grid system (display:grid) and I have the following code, but I don't know how to center last two columns (4 and 5) without add more columns in grid-template-columns and use grid-column-start and grid-column-end in the

问题 I'm using Angular Material and its flexbox functionality. I have now come across an issue that seems to me should be simple, but I have problems with it. I've created this Codepen for demostrating my issue. So I have a row with items that exceed 100% of that row and has wrap enabled, so I get two rows of items without margins, like this: <div class="row" layout="row" layout-wrap="wrap"> <div flex="50" class="item1"></div> <div flex="50" class="item2"></div> <div flex="50" class="item3"></div>

问题 I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items. Example HTML: <div class="inner"> <div class="section green"> <img src="http://i.imgur.com/hEOMgVf.png"> </div> <div class="section red"> <img src="http://i.imgur.com/nEybO1g.png"> </div> </div> CSS: .inner { float: left; width: 500px; display: flex; justify-content: center; align-items: center; background-color: #343434; text-align: center; } .section { float: left; flex: 1;

问题 I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items. Example HTML: <div class="inner"> <div class="section green"> <img src="http://i.imgur.com/hEOMgVf.png"> </div> <div class="section red"> <img src="http://i.imgur.com/nEybO1g.png"> </div> </div> CSS: .inner { float: left; width: 500px; display: flex; justify-content: center; align-items: center; background-color: #343434; text-align: center; } .section { float: left; flex: 1;