flexbox

问题 Below is the CSS FLexbox layout I am working on. A live example is here as well as on this CodePen which is constantly updated: http://codepen.io/jasondavis/pen/OWbXNB?editors=1100 I need to add 2 DIV's to the layout and need help getting them positioned where I need them. Add a header DIV above the right content panel Add a Form Footer DIV like the current wrapper Footer with save and reset buttons along with saving indicator at the bottom of the Right Sidebar Lastly I need to remove the

问题 Below is the CSS FLexbox layout I am working on. A live example is here as well as on this CodePen which is constantly updated: http://codepen.io/jasondavis/pen/OWbXNB?editors=1100 I need to add 2 DIV's to the layout and need help getting them positioned where I need them. Add a header DIV above the right content panel Add a Form Footer DIV like the current wrapper Footer with save and reset buttons along with saving indicator at the bottom of the Right Sidebar Lastly I need to remove the

问题 I'm trying to achieve more or less the same of what is described in this question: Align an element to bottom with flexbox except for the fact that i can't use fixed heights. I have set of two cards that are already in a flex context (their heights are stretched with flexbox): Inside the card I have a series of elements: a header a body a footer (the blue div) What I want is the footer to always stick to the bottom. The inner container of the three elements described above have the following

问题 Currently the page looks like this: Now on resize to mobile screen flex boxes overflow the container: Html: <div id="bars" class="d-flex flex-row text-white text-center"> <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home"> <i class="fa fa-home d-block"></i> Home </div> <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume"> <i class="fa fa-graduation-cap d-block"></i> Resume </div> <div class="port-item p-4 bg-warning" data-toggle=

问题 I cannot figure out why my 4 column (flexbox) grid doesn't resize when using @media queries. I have my code here: https://jsfiddle.net/mrknz4a3/ .flexgrid-wrapper { width: 100%; border-collapse: collapse; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1% 0; margin: 2% 0 0; } .row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; clear: both; margin: 0 auto; max-width: 100%; height: 100%;

问题 I have a sidebar with main content that is working great... the problem is that for the main-content I am using the bootstrap class .container . Current behaviour When I shrink my page the main content pops underneath my sidebar. Desired behaviour I want the .container to shrink so that the sidebar and main-content fit on the screen. My Code https://jsfiddle.net/4jm70ton/ Markup: <!-- site footer --> <div class="footer"> <div class="footer-group footer-group-left"> <span> Slide 1/10 </span>

问题 I have dynamic content flowing into a two-column grid. Flex box is a nice solution, but it forces the rows to be the same height, creating some awkward white space when one has more content. Does anyone know of a lightweight solution that can achieve what is hopefully clearly communicated in the below image? Code for my current solution: .grid-container { display:flex; flex-wrap: wrap; justify-content:space-between; height:auto; height:700px; overflow-y:scroll; } .contained-cell{ width:48.5%;

问题 For some reason, vertical scroll is not working on my website when I access it on mobile Safari (iOS 9.1, iPhone 5, Safari 8.1): https://sleepy-anchorage-3222.herokuapp.com The mobile Safari debug results are attached.The only relevant errors I see are 5 CSS, font-awesome related warnings, everything else is normal. Vertical scroll works fine on iPhone 6, and also its fine on my desktop browser. What's going on here?? (Note: I'm using Font Awesome icons and FlexBox layout, not sure if either

问题 I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue: The flex box css is: .equal-height { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-flex-direction: row; -webkit-flex

问题 I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue: The flex box css is: .equal-height { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-flex-direction: row; -webkit-flex