flexbox

问题 I'm trying to understand how display:flex works, but whenever I set it, the childs don't take the whole width. I was expecting the three divs getting a 33% of the screen width. What am I doing wrong? .flexbox { display: flex; } .flexbox div { border: 1px solid black; padding: 10px; } <div class="flexbox"> <div>One</div> <div>Two</div> <div>Three</div> </div> 回答1: You need to tell flex items to expand. They don't consume free space by default. The initial setting of flex-basis is auto , which

问题 I would like to achieve this fully justified horizontal menu: Justifying is done with flexbox and works, but I could not get the separating mid-dots justified, too; they are made by using css-content via pseudo-class. Also, I am wondering if there's a better way to vertically center the items than faking it by adding a padding as I have done it. Here's my code and the fiddle: ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; } li.home { padding: 0; }

问题 I want to add flexibility polyfill in my build to support ie8 & 9. Is there a way with gulp to add in the -js-display: flex; before display: flex; as required? .container { -js-display: flex; display: flex; } https://github.com/10up/flexibility Thanks! 回答1: You can use gulp-postcss in combination with the postcss-flexibility plugin: var gulp = require('gulp'); var postcss = require('gulp-postcss'); var flexibility = require('postcss-flexibility'); gulp.task('css', function() { return gulp.src

问题 I'm getting into Flexbox now, trying to see how I can transition from using the traditional CSS grids. I have two layouts: One made with a CSS grid. The other one made using Flexbox. The basic layout for both examples is quite basic: A header, a nav, a content section and the footer. Design-wise they both look the same and behave exactly the same for RWD. However, in order for me to accomplish the same behavior using Flexbox I had to create a wrapper div around the Nav and the Content

问题 I'm using flex . There seems to be an unexpected margin difference between two div elements - the third row has a different margin between the divs than the first two rows: How do I amend the code so that the third row's margin is the same as the first two rows? .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .container:after { flex: 1; content: ''; } .container form { width: 100%; display: flex; } .container .comment { flex: 1; } .square { padding: 10px; width:

问题 I'm trying to get a consistent display of my gallery on Firefox and Chrome. But on the first, it's not as intended... I'm forcing the height of images and letting the width to auto. On both browsers the images are correctly resized... buuut on Firefox the parent element keeps the original width of the image and not the auto calculated one. This only appear if the parent height is in percent. If I put another unit like vh, it works as intended. Why Firefox is doing this? Or it's a PEBKAC...

问题 When using column wrap as flex-flow it seems to cause problems to the container's dimensions in chrome. Example HTML: <div class="root"> <div class="outer"> <div class="inner">A</div> <div class="inner">B</div> <div class="inner">C</div> <div class="inner">D</div> <div class="inner">E</div> <div class="inner">F</div> <div class="inner">G</div> <div class="inner">H</div> <div class="inner">I</div> <div class="inner">J</div> </div> </div> CSS: body{ margin: 0; padding: 0; } .root{ display: flex

问题 I'm building out a UI that requires a fixed position/sticky element at the bottom of the viewport with a width constrained by a main content area. The main content area is optionally flanked by (sibling) left and/or right sidebars with fixed widths, so I'm using Flexbox to build the three column structure with flex-grow: 1 on the main content. I've learned from @Marc Audet's accepted answer at How can I make a fixed positioned div inherit width of parent? that setting width: inherit on the

问题 Consider the following page, which displays a line of text with a <textarea> underneath it. * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } .outer { background-color: #eee; display: flex; flex-direction: column; height: 100%; padding: 10px; } .expand { flex-grow: 1; } textarea { height: 100%; width: 100%; } <div class="outer"> <p> Nice little wall of text. </p> <div class="expand"> <textarea></textarea> </div> </div> The intended behavior is to have the textarea occupy

问题 The blue box should be 100% height. It works when I set a pixel height for div.a , but unfortunately this is not an option for the real world case. This probably explains everything: http://codepen.io/anon/pen/jrVEpB .a{ background-color:red; display:flex; } .b1{ flex-grow:0; background-color:green; } .b2{ flex-grow:1; background-color:yellow; height:100%; } .c{ height:100%; background-color:blue; } <div class="a"> <div class="b1"> <p>hurr durr</p> <p>hurr durr</p> <p>hurr durr</p> <p>hurr