flexbox

justify-content and flex-grow being ignored

由 早过忘川 提交于 2019-12-24 16:06:55
问题 I'm having a problem with CSS flexbox. I had a working code yesterday yet today when I tested my solution it stopped working for some reason. It has to do with flexbox. This is the result I want to have: To be able to position the content with justify-content . This fails Content should take all the available space so it has flex-grow: 1 . This fails, as well. The footer should be at the bottom since the content would push it down by taking all the available space thanks to flex-grow: 1 .

Chrome shrinks figure elements as they are added to a flexbox

由 孤街醉人 提交于 2019-12-24 14:50:30
问题 I am designing a webpage in which <figure> elements are dynamically added to a flexbox. These figures each contain an image which can be of any size and aspect ratio as well as a <figcaption> . The flexbox has justify-contents: space-between , and it is my intention that it should be populated with an indefinite number of horizontally arranged, evenly-spaced figures. The following code works perfectly on Firefox (at least as far as I can tell): <html> <head> <style> div { display: flex;

Same height for flex items in the flex-direction column flex container

由 吃可爱长大的小学妹 提交于 2019-12-24 14:27:13
问题 Is there a way to have flex items within a flex container with flex-direction: column have the same height, using css only? <div style="display: flex; flex-direction: column;"> <div class="flex-item"> <!-- other html elements with image, links, button etc. --> </div> <!-- ... --> <div class="flex-item"></div> </div> fiddler: https://jsfiddle.net/hzxa9v54/ 回答1: You will need a script to solve that using Flexbox, here done using jQuery. Updated fiddle Stack snippet (function ($) { // preload

Using Flexbox with bootstrap 3 and laravel 4 blade templates and associated LESS mixin

由 戏子无情 提交于 2019-12-24 13:43:04
问题 I am trying to implement a flexbox solution to display an inline mailbox system for a site that is in development. The basic design I need to implement is displayed in the wireframe : The zone with the red border is where I need to implement the flexbox. As the development is done with Laravel Blade Tempting engine, we're using included files to generate the content of the three panes (left mailboxes, middle email list and right email viewer). The basic code structure is as follows: This

3 Column Flex Layout - Middle Column only as width as it's content

由 非 Y 不嫁゛ 提交于 2019-12-24 13:40:27
问题 My fiddle so far: .fill-height-or-more { min-height: 100%; display: flex; } .fill-height-or-more > div { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; display: flex; justify-content: center; flex-direction: column; align-items : center; } .some-area > div { padding: 1rem; } .some-area > div:nth-child(1) { background: #88cc66; } .some-area > div:nth-child(2) { background: #79b5d2; } .some-area > div:nth-child(3) { background: #8cbfd9; } .some-area > div h1,

Make flex list items stagger into multiple lines on smaller screens

由 你离开我真会死。 提交于 2019-12-24 13:28:25
问题 I am attempting to make a css flex list stagger text onto two lines on smaller screens however nothing I've tried seems to work. I've attempted to use spans and br at several different media queries but to no avail. Any help would be greatly appreciated. This is how I would like it to look: Text Text Text Text Text Text Text Text Here is my code Html <div class="div"> <h1 class="text-center">List</h1> <ul id ="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six

Stick Footer at the bottom of page [duplicate]

由 …衆ロ難τιáo~ 提交于 2019-12-24 12:43:56
问题 This question already has answers here : How do you get the footer to stay at the bottom of a Web page? (27 answers) Closed 6 months ago . I want to stick footer at the bottom of the page even when there is no content. When there is enough content, the footer should move to the end of the page. I'm learning flexbox and tried doing so using flexbox. But it isn't working. html { height: 100%; } body, #root { display: flex; flex-direction: column; } .app { text-align: center; } .header, .footer

How can I achieve float left at bottom and float right at top with css flexbox?

由 怎甘沉沦 提交于 2019-12-24 12:33:50
问题 How can I simulate float left bottom and float right at top with the CSS3 flexbox? I want to achieve following situation ( Important: the text in the div boxes should be also vertical and horizontal centered): EDIT: PLNKR EXAMPLE: http://plnkr.co/edit/oVfbAAIZxRQLRRML7rJR?p=preview But the text in the div boxes should be also vertical and horizontal centered. Following Code should be augmented: display: flex; // for parent container align-self: flex-end; // for child div-1 to place it at

How can I use Flexbox to align two boxes in a column, next to a row?

由 混江龙づ霸主 提交于 2019-12-24 11:46:00
问题 What I would like to do is quite particular, so I've drawn a picture to illustrate it: I can easily implement this: but it doesn't look good on this site because the E element is much taller than C or D. What I would like, is for C and D to stack when the browser window is wide, but not when it's medium width. I'm trying to implement this with CSS and Flexbox, and I've tried grouping together C and D in a div, but this creates problems at the medium layout. 回答1: Flexbox is 1D layout. Of

Collapse Text in Flex Without specifying width or flex-basis

由 若如初见. 提交于 2019-12-24 11:44:27
问题 I need to have a horizontal menu that will collapse text with ellipsis, but doesn't expand to full width. I've gotten it to work fine, except for IE. If I set width or flex-basis, it will work, but then it's not set based on content size anymore. Does anyone have any tips on a workaround? I've googled around for a fix, but nothing I've tried so far has been successful. html,body { font-family: verdana, sans-serif; } div { position: relative; width: 450px; background: #0088ff; margin-bottom:
订阅 flexbox